一、数据双向绑定
angular(下面统一简称ng)强大的地方莫过于它内置的数据双向绑定功能,下面我们通过一个简单的例子来演示ng强大的双向绑定数据的能力。
代码如下:
1、dom结构:
1.<!DOCTYPE html>2.<html lang="en" ng-app="myApp">3.<head>4. <meta charset="UTF-8">5. <title>Document</title>6. <script src="js/angular.js"></script>7.</head>8.<body>9. <form ng-controller="userInfoCtrl">10. <input type="text" ng-model="userInfo.name">11. {{userInfo.name}}12. <p ng-bind="userInfo.age"></p>13. </form>14.15.</body>16.</html>
2、js代码:
1.var app = angular.module(‘myApp‘,[]);2. app.controller(‘userInfoCtrl‘,function($scope){3. $scope.userInfo = {4. name: ‘张三‘,5. age: ‘18‘ 6. }7. })8. app.controller(‘userInfoCtrl‘,[‘$scope‘,function($scope){9. $scope.userInfo = {10. name: ‘张三‘,11. age: ‘19‘ 12. }13. }])
上面的例子简单的实现了ng的双向绑定功能,那么到底是怎么实现的呢?
1、先加载angular.js文件;
2、在根节点html上(也可以是其他任何一个节点,在哪里添加,ng的边界就在哪里产生)添加ng-app指令,它会告诉浏览器,从这个地方开始,里面的内容都用ng去解析渲染;
3、给form添加ng-controller,这是添加控制器(也可以叫作用域)的指令,它的作用是创建一个隔离的$scope对象,什么是$scope?
提到$scope,还得先从$rootscope说起,$rootScope是ng中最接近全局作用域的对象。在$rootScope上附加太多业务逻并不是好主意,这与污染JavaScript的全局作用域是一样的。$scope对象就是一个普通的JavaScript对象,我们可以在其上随意修改或添加属性。
4、给input添加ng-model指令,值等于变量userInfo.name。ng-model就是实现ng数据双向绑定的指令。ng-model指令用来将input、 select、 textarea或自定义表单控件同包含它们的作用域中的属性进行绑定。(这是第一种绑定方法);
5、{{ }}语法是AngularJS内置的模板语法,它会在内部$scope和视图之间创建绑定。基于这个绑定,只要$scope发生变化,视图就会随之自动更新。(这是第二种绑定方法);
6、尽管可以在视图中使用{{ }}模板语法(ng内置的方式),我们也可以通过ng-bind
指令实现同样的行为。
接下来是Js代码部分的实现
7、ng允许我们使用angular.module()方法来声明模块,这个方法能够接受两个参数,第一个是模块的名称,第二个是依赖列表,也就是可以被注入到模块中的对象列表。接下来,就可以在angular.module(‘myApp’)返回的对象上创建我们的应用了。
8、通过ng-controller创建一个作用域,并对作用域中的$scope对象进行操作;
9、在userInfoCtrl这个作用域中,添加控制器逻辑处理的代码。
10、总结:在ng中,通过controller控制器连接了视图与逻辑层,任何一方发生变化都会引起另一方的变化,而实现这个功能的方法则可以通过:ng-model、{{ }}或者ng-bind。
二、常见的几种页面判断
1.ng-switch
ng-switch用来判断输入框的值和预定义的值是否匹配,如果匹配,则显示预定义的视图,反之则显示默认的视图。这个指令和ng-switch-when及on=”propertyName”一起使用,可以在propertyName发生变化时渲染不同指令到视图中。在下面的例子中,当person.name是Ari时,文本域下面的div会显示出来,并且这个人会获得胜利:
1.<input type="text" ng-model="person.name"/>2.<div ng-switch on="person.name">3. <p ng-switch-default>And the winner is</p>4. <h1 ng-switch-when="Ari">{{ person.name }}</h1>5.</div>
2.ng-if
使用ng-if指令可以完全根据表达式的值在DOM中生成或移除一个元素。如果赋值给ng-if的表达式的值是false,那对应的元素将会从DOM中移除,否则对应元素的一个克隆将被重新插入DOM中。
1.<div ng-if="2+2===5">2. Won‘t see this DOM node, not even in the source code3.</div>
因为2+2并不等于5,所以表达式为false,最后这个div会被移除。
3.ng-show、ng-hide
ng-show和ng-hide根据所给表达式的值来显示或隐藏HTML元素。当赋值给ng-show指令的
值为false时元素会被隐藏。类似地,当赋值给ng-hide指令的值为true时元素也会被隐藏。
1.<div ng-show="2 + 2 == 4">2. 2 + 2 is 4, do show3.</div>4.<div ng-hide="2 + 2 == 5">5. 2 + 2 isn‘t 5, don‘t hide6.</div>
从结果上来看,ng-if和ng-show/ng-hide似乎效果差不多,但两者的最大区别在于,前者会移除dom结构,而后者不会移除dom结构,只是通过样式的display:none和display:block来控制。