AngularJs 内置指令

最新推荐文章于 2020-07-21 15:34:29 发布

@航空母舰

最新推荐文章于 2020-07-21 15:34:29 发布

阅读量119

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： javascript ViewUI

本文链接：https://blog.youkuaiyun.com/hudeyong926/article/details/99540583

javascript 专栏收录该内容

70 篇文章

订阅专栏

本文介绍了Angular中ng-repeat指令的使用，包括如何通过$index、$first、$middle、$last获取元素序号，以及如何利用ng-if、ng-model等指令进行数据绑定和条件展示。还展示了如何在循环中实现过滤、选择和操作数据集。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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;
}

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

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

asdf