AngularJs 内置指令

ng-repeat指令可以通过$index返回当前引用的元素序号;还可以通过$first 、$middle及$last,ng-repeat 指令返回布尔值,告诉你当前元素是否是集合中的第一个元素、中间的某个元素,或者最后一个元素

<!doctype html>
<html ng-app>
<head>
    <script src="lib/angular/angular.min.js"></script>
    <script>
        function TestCtrl($scope) {
            $scope.items = [
                { id: 0, name: "Red"},
                { id: 1, name: "Red"},
                { id: 2, name: "Red"},
                { id: 3, name: "Red"},
                { id: 4, name: "Yellow"},
                { id: 5, name: "Orange"}
            ];
        }
    </script>
</head>
<body ng-controller="TestCtrl">
<ul ng-repeat="a in items" ng-if="a.name!=items[$index-1].name">
    {{ a.name }}
</ul>
</body>
</html>

checkbox list

<tr data-ng-repeat="list in lists">
    <td>
        <input type="checkbox" data-ng-model="list.isChecked" />
    </td>
    <td>{{list.itemSno}}</td>
</tr>
var arr = [];
ng.forEach($scope.lists, function(list) {
  if (list.isChecked) {
    arr.push(list.itemSno);
  }
});

ng-show="一个判断条件:当其值为true时,显示"

 

ng-disabled="一种状态:该状态下不可用"

ng-readonly

 

function Ctr($scope) { 
    $scope.isActive = true;
}

 <div ng-class="{true: 'active', false: 'inactive'}[isActive]">

isActive表达式为true,则 active,否则inactive。
<div ng-class="{'selected': isSelected, 'car': isCar}"></div>
当isSelected = true 则增加selected class,当isCar=true,则增加car class。以此类推。

 

修改时有hidden控件,新增时没有控件

<input type="hidden" class="form-control"  ng-if="message.pk" data-ng-model="message.pk"/>

 

src href和属性注意事项
当数据绑定给一个<img>或者<a>标签时, 像上面一样在src或者href属性中使用 {{ }}处理路径将无法正常工作. 因为在浏览器中图片与其他内容是并行加载的, 所以Angular 无法拦截数据绑定的请求.

<img ng-src="/images/cats/{{favoriteCat}}">
<a ng-href="/shop/category={{numberOfBalloons}}">some text</a>

 asdf

 
 

你可能感兴趣的:(AngularJS)