angularJs指令详解
ng-repeat指令
ng-repeat指令的作用：
遍历集合
通过in的方式遍历每一项。类似vue.js中的v-for
<pre>
<!doctype html>
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8">
<title>title</title>
<script src="js/angular.min.js"></script>
<script type="text/javascript">
var app=angular.module("app",[]);
app.controller("aaa",["$scope","$filter",function($scope,$filter){
/* $scope.datalist=["aa","bb","cc"];*/
$scope.originlist=[
{color:"red",age:"26"},
{color:"green",age:"25"},
{color:"yellow",age:"16"},
{color:"blue",age:"30"}
];
$scope.userlist= $scope.originlist;
$scope.fnsort=function(arg){
//在当前函数对象上设置排序方式开关，第一次点击从大到小，第二次点击从小到大
arguments.callee['fnsort'+arg]=!arguments.callee['fnsort'+arg];
$scope.userlist=$filter("orderby")( $scope.originlist,arg,arguments.callee['fnsort'+arg]);
};
$scope.fnsearch=function(){
$scope.userlist= $filter("filter")($scope.originlist,$scope.keyword);
}
}]);
</script>
</head>
<body>
<p ng-controller="aaa">
<input type="text" ng-model="keyword"><input type="button" value="搜索" ng-click="fnsearch()">
<table>
<tbody>
<tr>
<th ng-click="fnsort('color')">姓名</th>
<th ng-click="fnsort('age')">年龄</th>
</tr>
<tr ng-repeat="data in userlist">
<td>{{data.color}}</td>
<td>{{data.age}}</td>
</tr>
</tbody>
</table>
</p>
</body>
</html>
</pre>
callee 是 arguments 对象的一个属性。它可以用于引用该函数的函数体内当前正在执行的函数。这在函数的名称是未知时很有用，例如在没有名称的函数表达式 (也称为“匿名函数”)内； 返回正被执行的 function 对象，也就是所指定的 function 对象的正文； arguments.length是实参长度，arguments.callee.length是形参长度； 在es5严格模式中，禁止使用arguments.callee：这意味着，你无法在匿名函数内部调用自身了。
"use strict";
var f = function() {
return arguments.callee;
};
f(); // 报错
np-repeat指令的扩展
$index 每一项索引
$first
<li ng-repeat=" data in datalist">{{$first}}</li>，除了第一项为true，其余项为false。
last，与first相反
$middle
<li ng-repeat=" data in datalist">{{$first}}</li>，除了第一项和最后一项为false，其余项为true。
even和odd
{{data}}
`，实现隔行变色
ng-repeat-start和ng-repeat-end
当想要重复的html结构不是包含关系，而是兄弟关系，可采用此种辅助方式。
<pre>
<p ng-repeat-start=" data in datalist">{{data}}+1</p>
<p>{{data}}+2</p>
<p ng-repeat-end>{{data}}+3</p>
</pre>
事件指令
与原生事件相比，支持表达式和数据变量。
- ng-click/dbclick
- ng-mousedown/up
- ng-mousemove/over/out
- ng-keydown/up/press
- ng-focus/blur
- ng-submit
- ng-selected 下拉菜单被选中的时候，触发此事件
- ng-change 输入框内的值只要一变化，就会触发此事件
注意：ng-change必须和ng-model一起使用才会起作用。
<input type="type" ng-change="bb='hello' ng-model="bb" >{{bb}}
ng-change指令内也可以写函数。
ng-cut/copy/paste
当我们在输入框中进行剪切、复制、黏贴操作，就会触发相应的指令。
input相关指令
ng-disabled 可动态设置表单控件的状态
ng-readonly
readonly与disabled的区别：
readonly只能用于输入框（text、textarea）,对于按钮是不起作用的;
输入框设置了readonly属性还是可以提交，但是设置了disabled属性就不可以。
ng-checked 用于checkbox
ng-value 针对表单控件的value
<input type="text" ng-value="val">，效果类似于：<input type="text" value="{{val}}">。
选择用ng-vaule会更好一些，原因在于：
当运行时，是先解析html代码，再执行js代码，如果用户的网速比较慢，那么浏览器解析js代码也可能会比较慢，用户很有可能会看到“{{val}}”这样的内容，所以会导致用户体验性不好，用ng-value就不会出现这个问题。
数据显示优化处理及插件简介
ng-bind
为了解决在html标签中，直接使用“{{html}}”可能会出现与上文相同的问题，改用ng-bind。
<p>{{html}}</p>,改用<p ng-bind="html"></p>。
ng-bind只能写一个表达式。如果想写多个表达式，可用ng-bind-template指令
ng-bind-template
<p ng-bind-template="{{html}}，{{html}}"></p>
ng-bind-html
支持变量的值含有html标签，即能够识别html标签，而ng-bind和ng-bind-template不能，会把html标签当成普通字符串。
由于一般都是处理纯数据很少有需求是要带html标签，ng-bind-html用的比较少，angular就把这一块单独提取出来形成插件，而没有像那些通用的指令存放在angular库中
<pre>
//解析html的插件
<script src="js/angular.min.js"></script>
<script src="https://cdn.bootcss.com/angular.js/1.6.0/angular-sanitize.js"></script>
<script>
//它既是一个插件也是一个模块，所以引用它，就需要依赖这个模块
var m1=angular.nodule("app",['ngsanitize']);
m1.controller("aaa",['$scope',function($scope){
$scope.text='<h1>hello</h1>';
}]);
</script>
<body>
<p ng-controller="aaa">
<p ng-bind-html="text"></p>
</p>
</body>
</pre>
-ng-cloak
用来控制css的一种方式
<p ng-cloak>{{text}}</p>,加上cloak指令后，这个p标签的display为none隐藏,当表达式解析完成后，就让这个p标签的display为block显示出来。
- ng-non-bindable
用来使表达式不被解析。
<p ng-non-bindable>{{text}}</p>,运行结果就是“{{text}}”表达式没有被解析。