<html> <body> 4. 依赖注入 函数定义完整的写法应该像AMD声明一样： var BoxCtrl = ['$scope', '$element', function(s, e){}]; 简单起见就写成了一个函数定义原本的样子，然后再定义参数的名字上做文章起到依赖声明的作用，所以参数的名字不能随便写。 var BoxCtrl = function($scope, $element){} 6. 数据绑定与模板 数据-->模板 使用模板标记直接完成的{{}}，在实现上ng自动创建了一个watcher如果作用域变量发生了改变页面表现也改变 对于使用ng进行的事件绑定，在处理函数中就不需要去关心$digest()的调用ng会自己处理，真正处理的函数不是指定名字的函数而是经过$apply() 包装过得一个 函数，这个 $apply() 做的一件事，就是调用根作用域 $rootScope 的 $digest() 模板-->数据 模板到数据的绑定，主要是通过ng-model来完成的 7. 模板 7.1 使用ng-include引入一段模板 7.2 ng-repeat [$index, $first, $middle, $last] ng-init 可以再模板中直接赋值，它作用于angular.bootstrap之前，并且定义的变量与$scope作用域无关 7.3 ng-style可以使用一个结构直接表示当前节点的样式 <!--<div ng-style="{100,height:1100,backgroundColor:'red'}"></div>--> ng-class可以直接地设置当前节点的类 ng-class-even 和 ng-class-odd 是和 ng-repeat 配合使用的： <!-- <ul ng-init="l=[1,2,3,4]"> <li ng-class-odd="'odd'" ng-class-even="'even'" ng-repeat="m in l">{{ m }}</li> </ul> --> ng-show, ng-hide, ng-switch ng-src, ng-href, ng-checked, ng-disabled, ng-muliple, ng-readonly 这些只是单向绑定，从数据到展示不能反作用于数据。 7.4 事件绑定 ng-change ng-click ng-dblclick ng-mousedown ng-mouseenter ng-mouseleave ng-mousemove ng-mouseover ng-mouseup ng-submit 对于事件对象本身，在函数调用时可以直接使用$event进行传递 7.5 表单控件 form input 相关属性为：name名字，ng-model绑定的数据，required是否必填，ng-minlength最小长度，ng-pattern匹配模式，ng-change值变化时的回调 input控件有一些扩展这些扩展有些有自己的属性： input type="number"多了number错误类型，多了max，min属性 input type="url"多了url错误类型 input type="email"多了email错误类型 checkbox：没有验证相关的东西只有选中与不选中两个值 <!-- <form name="test_form" ng-controller="TestCtrl"> <input type="checkbox" name="a" ng-model="a" ng-true-value="AA" ng-false-value="BB" /> <span>{{ a }}</span> </form> var TestCtrl = function($scope){ $scope.a = 'AA'; } --> select Array: <!-- <html lang="en" ng-app> <head> <meta charset="utf-8"> <title>My HTML File</title> <script src="angular.min.js"></script> <script type="text/javascript"> var TestCtrl = function($scope){ $scope.arr = [{name: 'AA', g: '00', v: '='}, {name: 'BB', g: '11', v: '+'}, {name: 'CC', g: '00', v: '!'}]; $scope.a = $scope.arr[1].v; $scope.show = function(){ console.log($scope.a); } } </script> </head> <body ng-controller="TestCtrl"> <form name="test_form"> <select ng-model="a" ng-options="x.v as x.name group by x.g for x in arr" ng-change="show()"> <option value="">可以加这个空值</option> </select> </form> </body> </html> --> Object: <!-- <html lang="en" ng-app> <head> <meta charset="utf-8"> <title>My HTML File</title> <script src="angular.min.js"></script> <script type="text/javascript"> var TestCtrl = function($scope){ $scope.obj = {a: {name: 'AA', v: '00', g: '=='}, b: {name: 'BB', v: '11', g: '=='}, c: {name: 'CC', v: '22', g: '++'}}; $scope.a = $scope.obj.a.v; $scope.show = function(){ console.log($scope.a); } } </script> </head> <body ng-controller="TestCtrl"> <form name="test_form"> <select ng-model="a" ng-options="v.v as v.name group by v.g for (k, v) in obj" ng-change="show()"> <option value="">可以加这个空值</option> </select> </form> </body> </html> --> 8. 模板中的过滤器：对数据的格式化或者筛选的函数 orderBy filter 字符串：列表成员中的任意属性值中有这个字符串即为满足条件 可以使用对象来指定属性名，$表示任意属性 {{data|filter:{name:'A'} }} {{data|filter:{$:'3'} }} 自定义过滤：{{data|filter: f}} var TestCtrl = function($scope){ $scope.data = [ {name: 'B', age: 4}, {name: 'A', age: 1}, {name: 'D', age: 3}, {name: 'C', age: 3}, ]; $scope.f = function(e){ return e.age > 2; } } 时间戳data： {{ a | date: 'yyyy-MM-dd HH:mm:ss' }} 列表截取limitTo： {{{{ [1,2,3,4,5] | limitTo: 2 }}}} 大小写 lowercase，uppercase ： {{ 'abc' | uppercase }} {{ 'Abc' | lowercase }} <!-- <html lang="en" ng-app> <head> <meta charset="utf-8"> <title>My HTML File</title> <script src="angular.min.js"></script> <script type="text/javascript"> var TestCtrl = function($scope){ $scope.data = [ {name: 'B', age: 4}, {name: 'A', age: 1}, {name: 'D', age: 3}, {name: 'C', age: 3}, ]; } </script> </head> <body> <div ng-controller="TestCtrl"> <table> <tr> <th ng-click="f='name'; rev=!rev">名字</th> <th ng-click="f='age'; rev=!rev">年龄</th> </tr> <tr ng-repeat="o in data | orderBy: f : rev"> <td>{{ o.name }}</td> <td>{{ o.age }}</td> </tr> </table> </div> </body> </html> --> </body> </html>