<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="{width: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>
浙公网安备 33010602011771号