AngularJs 内置指令

简介:

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

Java代码   收藏代码
  1. <!doctype html>  
  2. <html ng-app>  
  3. <head>  
  4.     <script src="lib/angular/angular.min.js"></script>  
  5.     <script>  
  6.         function TestCtrl($scope) {  
  7.             $scope.items = [  
  8.                 { id: 0, name: "Red"},  
  9.                 { id: 1, name: "Red"},  
  10.                 { id: 2, name: "Red"},  
  11.                 { id: 3, name: "Red"},  
  12.                 { id: 4, name: "Yellow"},  
  13.                 { id: 5, name: "Orange"}  
  14.             ];  
  15.         }  
  16.     </script>  
  17. </head>  
  18. <body ng-controller="TestCtrl">  
  19. <ul ng-repeat="a in items" ng-if="a.name!=items[$index-1].name">  
  20.     {{ a.name }}  
  21. </ul>  
  22. </body>  
  23. </html>  

checkbox list

Java代码   收藏代码
  1. <tr data-ng-repeat="list in lists">  
  2.     <td>  
  3.         <input type="checkbox" data-ng-model="list.isChecked" />  
  4.     </td>  
  5.     <td>{{list.itemSno}}</td>  
  6. </tr>  
  7. var arr = [];  
  8. ng.forEach($scope.lists, function(list) {  
  9.   if (list.isChecked) {  
  10.     arr.push(list.itemSno);  
  11.   }  
  12. });  

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

 

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

ng-readonly

 

Java代码   收藏代码
  1. function Ctr($scope) {   
  2.     $scope.isActive = true;  
  3. }  

 <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 无法拦截数据绑定的请求.

Java代码   收藏代码
  1. <img ng-src="/images/cats/{{favoriteCat}}">  
  2. <a ng-href="/shop/category={{numberOfBalloons}}">some text</a>  

 asdf

相关文章
|
移动开发 前端开发 JavaScript
AngularJS 技术深入解析
AngularJS 是一个流行的 JavaScript 框架,用于构建动态的单页面应用程序(SPA)。它提供了一种优雅而强大的方式来开发前端应用,具有出色的数据绑定、模块化和可扩展性等特性。本文将深入探讨 AngularJS 的一些关键技术。
118 0
|
JavaScript 内存技术
angularJS 常用指令小结
angularJS 常用指令小结
147 0
|
JavaScript
AngularJs错误
AngularJs错误
92 0
|
JavaScript 前端开发
|
JavaScript 前端开发 移动开发
|
JavaScript 前端开发 容器