AngularJS实战之ng-repeat的详细用法
2017-10-13 00:00
246 查看
摘要: AngularJS实战之ng-repeat的详细用法
一、基本语法
{{$index}}:获取元素的下标。
{{$first}}:判断当前元素是否是第一个元素,是则为true,否则:false;
{{$last}}:判断当前元素是否是最后一个元素,是则为true,否则:false;
{{$middle }}:判断当前元素是否是中间元素,,是则为true,否则:false;
{{ $odd}}:判断当前元素是否是奇数,,是则为true,否则:false;
{{ $even}}:判断当前元素是否是偶数,,是则为true,否则:false;
二、嵌套ng-repeat
获取父级的属性用{{$parent.$index}},当然一个也可以多个$parent方式获取父级的父级。
三、排序、过滤
四、错误解决
这个错误是angular数组中有两个级以上相同的数字,想要解决需要使用track by $index来规避这个错误,也可以使用当前元素中的内容来充当例如ng-repeat="item in list track by item.id "
五、坑
我们很多时候会使用angular的$index当作下标进行一系列操作,但是这里要注意了,当我们使用了filter过滤了数组会导致下标不准确,此时我们应该使用元素本身作为条件操作。
一、基本语法
{{$index}}:获取元素的下标。
{{$first}}:判断当前元素是否是第一个元素,是则为true,否则:false;
{{$last}}:判断当前元素是否是最后一个元素,是则为true,否则:false;
{{$middle }}:判断当前元素是否是中间元素,,是则为true,否则:false;
{{ $odd}}:判断当前元素是否是奇数,,是则为true,否则:false;
{{ $even}}:判断当前元素是否是偶数,,是则为true,否则:false;
二、嵌套ng-repeat
获取父级的属性用{{$parent.$index}},当然一个也可以多个$parent方式获取父级的父级。
三、排序、过滤
<!--升序 --> <div ng-repeat="item in grandfather|orderBy: 'letter'" style="background-color: red;"> {{item.letter}}</div> <!--降序 --> <div ng-repeat="item in grandfather|orderBy: '-letter'" style="background-color: green;"> {{item.letter}}</div> <!--多个排序 --> <div ng-repeat="item in grandfathermore|orderBy: ['-letter','name']" style="background-color: #388cff;"> {{item.name}}</div> <!--多个排序+过滤 --> <div ng-repeat="item in grandfathermore|orderBy: ['-letter','name']|filter:'o'" style="background-color: #333;"> {{item.name}}</div> </body> <script type="text/javascript" src="../plugins/angular/angular.js"></script> <script type="text/javascript"> var lxApp=angular.module("lxApp",[]); lxApp.controller("lxCtrl",function($scope){ $scope.grandfather=[{"letter":"a"},{"letter":"b"}]; $scope.grandfathermore=[{"letter":"a","name":"lx"},{"letter":"a","name":"kebo"}]; }); </script>
四、错误解决
这个错误是angular数组中有两个级以上相同的数字,想要解决需要使用track by $index来规避这个错误,也可以使用当前元素中的内容来充当例如ng-repeat="item in list track by item.id "
五、坑
我们很多时候会使用angular的$index当作下标进行一系列操作,但是这里要注意了,当我们使用了filter过滤了数组会导致下标不准确,此时我们应该使用元素本身作为条件操作。
相关文章推荐
- AngularJS中的ng-repeat、ng-repeat-start和ng-repeat-end的用法区别详解
- ng-repeat 在angularJS中用法
- Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
- Angularjs中select 的ng-repeat 和 ng-options 用法和获取选取值
- AngularJs之ng-repeat的用法
- angularjs中ng-repeat-start与ng-repeat-end用法实例
- angularJS-1:ng-repeat用法
- Angularjs中select 的ng-repeat 和 ng-options 用法和获取选取值
- AngularJS实战之ng-repeat的使用
- angularjs中ng-repeat-start与ng-repeat-end用法实例
- angularjs 可以加入html标签方法------ng-bind-html的用法总结(2)
- AngularJS进阶(三十九)基于项目实战解析ng启动加载过程
- angularjs中 ng-repeat详解
- angularjs使用ng-repeat不用包含在html元素中
- AngularJS实践之使用ng-repeat中$index的注意点
- AngularJS中ng-repeat渲染完成事件和中间变量的引用
- Angular - ng-repeat高级用法
- AngularJS select详细用法
- Angular - ng-repeat 一些高级用法
- 如何在angularJS深层嵌套ngRepeat中获取不同层级的$index