AngularJs 内置指令

最新推荐文章于 2025-09-10 22:21:01 发布

转载最新推荐文章于 2025-09-10 22:21:01 发布 · 76 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://yq.aliyun.com/articles/43292

文章标签：

#java #javascript #ViewUI

本文详细介绍了 AngularJS 中 ng-repeat 指令的使用方法，包括如何利用 $index 获取元素序号，使用 $first、$middle 和 $last 判断元素位置。同时，文章还展示了如何结合 ng-if 实现条件渲染，并提供了使用 ng-model 进行双向数据绑定的示例。

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

    Java代码  
     
   
<!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

    Java代码  
     
   
<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

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

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

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

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

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

asdf