angularjs速成学习个人理解_1数据与模型绑定

来源：互联网发布：u盘安装ubuntu系统教程编辑：程序博客网时间：2024/05/29 02:38

Angularjs最牛的地方我人为他为前端的数据渲染（页面上数据的显示）提供了良好的方式。另外一个比较好玩的在于数据的双向绑定。

首先学习数据的绑定方式：

在angular中，数据的绑定是同步在模型与视图之前。

模型指的是$scope中的数据模型。

视图指的是html标签上的表达式{{表达式}}、ng-model。这里ng-model才是数据可以双向绑定的。{{表达式}}方式紧用于数据的显示，也就是单选绑定。

当数据在模型中发生改变的时候，视图也相应的发生改变。当在视图（ng-model）中发生改变的时候,模型数据也发生改变。

模型数据与视图的绑定是立刻并且自动的发生，这个过程是每时每刻的。

下面的代码很多注释，由于我习惯先学项目再搞理论。所以可能有理解不正确的地方请个位看官指正。

<!DOCTYPE html><html ng-app="myApp"><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><title>Data Binding - AngularJS Test</title><style type="text/css">.test-div {margin:15px;padding:15px;border:1px solid #ccc;}</style></head><body><div class="test-div" ng-controller="myCtrl">            <h1>时时发生变更的视图表达式{{number}}</h1>            <!-- 这个mvvm就是神奇的双向绑定。修饰input将与input的value进行双向绑定。            value发生改变那么model也发生改变 -->            <input type="text" ng-model="mvvm" />{{mvvm}}            <!-- $scope的数据模型是Function类型，那么当发生点击事件时将运行模型中的函数体 --><h3 ng-click="changeName()">点我变数据{{userName}}</h3></div><!-- 通常防止页面的加载缓慢，目的是先加载html的标签。angular或其他库先加载会影响页面的速度 --><script type="text/javascript" src="static/js/angular-1.5.8.js"></script><script type="text/javascript">            // 对应ng-app声明这是一个模块，并获取模块对象var myApp = angular.module("myApp", []);            // 对应ng-controller声明一个控制器。一个模块下可以包含多个控制器myApp.controller("myCtrl", function($scope, $interval) {                // 创建数据模型number并赋值                $scope.number = 0;                $scope.mvvm="初始值";                // 此函数是对js的interval函数的扩展。                $interval( function(){                    // 每一次修改自加1, 视图中{{number}}将立刻改变。                    $scope.number = $scope.number + 1;                }, 1000, 10); // 每隔1000毫秒改变一次作用域的number数据的值，一共循环10次                // 那么当发生点击事件时将运行模型中的函数体$scope.changeName = function() {                    // 添加模型数据userName并赋值Mytest$scope.userName = "Mytest";};});</script></body></html>

阅读全文

0 0