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
时间: 2024-10-31 00:28:42