2016年3月20日

angularjs

ng-repeat 指令

• 扩展部分

  • $index

    • 索引号

  • $first

    • 第一项返回true，其他都是false

  • $middle

    • 除了头尾，都返回true。

  • $last

    • 最后一项返回true。

  • $even

    • 奇数行返回true

  • $odd

    • 偶数行返回true

  • ng-repeat-start

  • ng-repeat-end

var m1 = angular.module('myApp',[]);
m1.controller('Aaa',['$scope',function($scope){

    $scope.dataList = [
        'aaaaa' , 'bbbbb' , 'cccccc' , 'dddddd' , 'eeeeee'
    ];

}]);

<div ng-repeat-start="data in dataList">{{data}}</div>
<p>{{data}}</p>
<div ng-repeat-end>{{data}}</div>

事件指令

• ng-click/dblclick

• ng-mousedown/up

• ng-mouseenter/leave

• ng-mousemove/over/out

• ng-keydown/up/press

• ng-focus/blur

• ng-submit

• ng-selected

<input type="checkbox" ng-model="aaa">
<select>
    <option>11111</option>
    <option ng-selected="aaa">22222</option>
    <option>33333</option>
</select>

• ng-change

• ng-copy

  • 进行复制操作会触发这个事件

• ng-cut

  • 进行剪切操作会触发这个事件

• ng-paste

  • 进行粘贴操作会触发这个事件

angularJs的指令

• ng-disabled

  • 服务 $interval，动态修改按钮的状态。

• ng-readonly

  • 针对文本可读状态， 对按钮没效果。

• ng-checked

• ng-value

• ng-bind

  • 只能嵌套一个

• ng-cloak

  • 控制display ，没解释完是none，解释完才显示 出来。

• ng-bind-template

  • 可以嵌套多个

• ng-bind-html

  • 不能解释标签，必须要添加插件

  • http://www.bootcdn.cn/angular.js/

• ng-non-bindable

  • 不让表达式去解释

angularJs的样式指令

• ng-class

• ng-style

• ng-href

• ng-src

• ng-attr-(suffix)

  • 一般的标签属性设置

var m1 = angular.module('myApp',[]);
m1.controller('Aaa',['$scope',function($scope){
    $scope.text = 'hello';
    $scope.style = "{color:'red',background:'yellow'}";
    $scope.sClass = "{red:true,yellow:true}";
    $scope.url = "http://www.baidu.com";
}]);

<div ng-controller="Aaa">
    <div ng-class="{{sClass}}">{{text}}</div>
    <div ng-style="{{style}}">{{text}}</div>
    <a ng-href="{{url}}">aaaaaaa</a>
    <a ng-attr-href="{{url}}" ng-attr-title="{{text}}" ng-attr-class="" ng-attr-style="">aaaaaaa</a>
</div>

• ng-init

• ng-include

  • 引入其他文件模板

<div ng-controller="Aaa" ng-include="'temp.html'">

• ng-model

  • 双向数据绑定

  • ng-model-options

  • updateOn

    • 双向数据绑定延迟触发

• ng-controller

  • as

    • 构造函数的属性

angularjs标签指令

• < a >

• < select >

  • ng-options

  • for in

• < textarea >

• < input >

• < form >

  • novalidate

    • 防止表单默认行为

ngularJs的表单验证

• $valid

  • 是否有效，有效返回true。可用于Email输入。

• $invalid

• $pristine

  • 是否修改过，是就返回true。

• $dirty

  • 初始值返回false

• $error

  • 打印认证信息

• 注意点

  • name的方式进行查找

  • 要写ng-model