Angular ng-repeat指令实例以及扩展部分
更新时间：2016年12月26日 15:23:51 作者：小谢53
这篇文章主要为大家详细介绍了Angular ng-repeat指令实例以及扩展部分，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
在前面的文章中学习filter过滤器，现在在结合着看看ng-repeat指令，举个例子。
<div ng-controller="Aaa">
<table border="1">
<tr>
<th ng-click="fnSort('name')">颜色</th>
<th ng-click="fnSort('age')">值</th>
</tr>
<tr ng-repeat="data in dataList">
<td>{{data.name}}</td>
<td>{{data.age}}</td>
</tr>
</table>
</div>
<script type="text/javascript">
var m1 = angular.module('myApp',[]);
m1.controller('Aaa',['$scope','$filter',function($scope,$filter){
$scope.dataList = [
{name : 'red',age : 20},
{name : 'yellow',age : 30},
{name : 'blue',age : 40},
{name : 'green',age : 50}
];
$scope.fnSort = function(type){
arguments.callee['fnSort' + type] = !arguments.callee['fnSort' + type];
$scope.dataList = $filter('orderBy')($scope.dataList,type,arguments.callee['fnSort' + type]);
};
}]);
</script>
先介绍一下ng-repeat指令，他是用来遍历数据的。
ng-repeat="data in dataList"，dataList是控制器里的数据，data就好比变量名，视图里的{{data.name}}表示数据里name对象。
其他的在前面都介绍过了。
在颜色和值上面绑定了fnSort方法，在fnSort方法里接受类型。
arguments.callee['fnSort' + type] = !arguments.callee['fnSort' + type]; 这句代码得到一个布尔值，来使用filter的排序方法来控制数据的正反排序。
上面的例子很简单，我们再为它加上一个搜索的功能！
<div ng-controller="Aaa">
<input type="text" ng-model="filterVal"><input type="button" ng-click="fnSearch()" value="搜索">
<table border="1">
<tr>
<th ng-click="fnSort('name')">颜色</th>
<th ng-click="fnSort('age')">值</th>
</tr>
<tr ng-repeat="data in dataList">
<td>{{data.name}}</td>
<td>{{data.age}}</td>
</tr>
</table>
</div>
<script type="text/javascript">
var m1 = angular.module('myApp',[]);
m1.controller('Aaa',['$scope','$filter',function($scope,$filter){
$scope.dataList = [
{name : 'red',age : 20},
{name : 'yellow',age : 30},
{name : 'blue',age : 40},
{name : 'green',age : 50}
];
$scope.fnSort = function(type){
arguments.callee['fnSort' + type] = !arguments.callee['fnSort' + type];
$scope.dataList = $filter('orderBy')($scope.dataList,type,arguments.callee['fnSort' + type]);
};
$scope.fnSearch = function(){
$scope.dataList = $filter('filter')($scope.dataList,$scope.filterVal);
};
}]);
</script>
我们声明了一个fnSearch方法，接受在视图中的ng-model数据，再使用filter的筛选功能，是不是很方便，回想下如果是用JQ来实现需要多少代码。
假设我们搜索'l'，那麽yellow和blue会正常的筛选出来。
并没有问题，如果在次输入'r'，应该会筛选出red和green才对！可是我们发现什麽都没有。。。
注意fnSearch方法里的这句代码，$scope.dataList = $filter('filter')($scope.dataList,$scope.filterVal); 我们在$scope.dataList数据里搜索，$scope.dataList在上一次搜索里，就仅剩yellow和blue两条数据，所以就搜索不到关于'r'的数据了，这个时候就声明一个局部的变量，方便第二次搜索依然是完整的数据。
完整代码：
<div ng-controller="Aaa">
<input type="text" ng-model="filterVal"><input type="button" ng-click="fnSearch()" value="搜索">
<table border="1">
<tr>
<th ng-click="fnSort('name')">颜色</th>
<th ng-click="fnSort('age')">值</th>
</tr>
<tr ng-repeat="data in dataList">
<td>{{data.name}}</td>
<td>{{data.age}}</td>
</tr>
</table>
</div>
<script type="text/javascript">
var m1 = angular.module('myApp',[]);
m1.controller('Aaa',['$scope','$filter',function($scope,$filter){
var oriArr = [
{name : 'red',age : 20},
{name : 'yellow',age : 30},
{name : 'blue',age : 40},
{name : 'green',age : 50}
];
$scope.dataList = oriArr;
$scope.fnSort = function(type){
arguments.callee['fnSort' + type] = !arguments.callee['fnSort' + type];
$scope.dataList = $filter('orderBy')($scope.dataList,type,arguments.callee['fnSort' + type]);
};
$scope.fnSearch = function(){
$scope.dataList = $filter('filter')(oriArr,$scope.filterVal);
};
}]);
</script>
上面用了ng-repeat只是最简单的遍历，现在看看ng-repeat的扩展部分。
ng-repeat-start以及ng-repeat-end，他们可以灵活控制遍历形式。
<div ng-controller="Aaa">
<div ng-repeat-start="data in dataList" class="active">{{data.name}}</div>
<p>{{data.age}}</p>
<div ng-repeat-end>{{data.name}}</div>
</div>
<script type="text/javascript">
var m1 = angular.module('myApp',[]);
m1.controller('Aaa',['$scope',function($scope){
$scope.dataList = [
{name : 'red',age : 20},
{name : 'yellow',age : 30},
{name : 'blue',age : 40},
{name : 'green',age : 50}
];
}]);
</script>
除此之外，还有6中扩展方法，还是上面的例子。
<div ng-controller="Aaa">
<ul>
<li class="{{$even ? 'active' : ''}}" is-even="{{$even}}" ng-repeat="data in dataList" data-i="{{$index}}">{{data.name}}</li>
<!-- $index 索引，值 -->
<!-- $first 第一个值，布尔类型 -->
<!-- $last 最後一个值，布尔类型 -->
<!-- $middle 去除头尾的中间项，布尔类型 -->
<!-- $even 奇数，布尔类型 -->
<!-- $odd 偶数，布尔类型 -->
</ul>
</div>
<script type="text/javascript">
var m1 = angular.module('myApp',[]);
m1.controller('Aaa',['$scope',function($scope){
$scope.dataList = [
{name : 'red',age : 20},
{name : 'yellow',age : 30},
{name : 'blue',age : 40},
{name : 'green',age : 50}
];
}]);
</script>
这6中扩展方法除了索引之外，都是布尔类型。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了浅谈Angular6的服务和依赖注入，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
本篇文章主要介绍了AngularJs之过滤器（filter）详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
大家在使用angularjs的时候，很容易忽略AngularJS自带指令的作用域问题，有一些指令会产生独立的自己作用域，造成子级无法与父级作用域双向绑定的问题。下面我们来看看这些问题，有需要的可以参考借鉴。2016-09-09
这篇文章主要介绍了浅析webapp框架AngularUI的demo以及对demo的简单修改，需要的朋友可以参考下2014-12-12
这篇文章主要介绍了使用angular-cli webpack创建多个包的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
这篇文章主要介绍了angularjs 缓存的使用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
本篇文章主要介绍了Angular客户端请求Rest服务跨域问题的解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-09-09
angularJS 发起$http.post和$http.get请求的实现方法
本篇文章主要介绍了angularJS 发起$http.post和$http.get请求的实现方法，分别介绍了$http.post和$http.get请求的方法，有兴趣的可以了解一下2017-05-05
这篇文章主要介绍了angularJS中router的使用方法和示例分享,需要的朋友可以参考下2015-02-02
本篇文章主要介绍了详解AngularJS2 Http服务，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
最新评论