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中扩展方法除了索引之外，都是布尔类型。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

AngularJS 中括号的作用详解
这篇文章主要介绍了AngularJS 中括号的作用,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-04-04
使用Angular 6创建各种动画效果的方法
Angular能够让我们创建出具有原生表现效果的动画。我们将通过本文学习到如何使用Angular 6来创建各种动画效果。在此，我们将使用Visual Studio Code来进行示例演示。感兴趣的朋友跟随小编一起看看吧
2018-10-10
AngularJS实践之使用ng-repeat中$index的注意点
最近通过客户的投诉主要到在ng-repeat中使用了$index引发的一个bug，下面一起来看看这个错误是如何引发的, 以及如何避免这种bug产生,然后说说我们从中得到的经验和教训。有需要的朋友们可以参考借鉴，下面来一起看看吧。
2016-12-12
Angular刷新当前页面的实现方法
这篇文章主要介绍了Angular刷新当前页面的实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-11-11
什么是 AngularJS？AngularJS简介
这篇文章主要介绍了什么是 AngularJS？AngularJS简介,本文讲解了AngularJS方方面面的基础知识,AngularJS 是一个为动态WEB应用设计的结构框架。它能让你使用HTML作为模板语言，通过扩展HTML的语法，让你能更清楚、简洁地构建你的应用组件,需要的朋友可以参考下
2014-12-12
angular中radio单选的问题解决demo
这篇文章主要为大家介绍了angular中radio单选的问题解决demo，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-05-05
Angular 开发学习之Angular CLI的安装使用
这篇文章主要介绍了Angular 开发学习之Angular CLI的安装使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-12-12
深入浅析AngularJS和DataModel
这篇文章主要介绍了深入浅析AngularJS和DataModel 的相关资料,需要的朋友可以参考下
2016-02-02
Angular.js中ng-if、ng-show和ng-hide的区别介绍
angularJS中的ng-show、ng-hide、ng-if指令都可以用来控制dom元素的显示或隐藏。那么这篇文章就给大家主要介绍了Angular.js中ng-if、ng-show和ng-hide的区别，需要的朋友可以参考借鉴，下面来一起看看吧。
2017-01-01
AngularJS动态绑定HTML的方法分析
这篇文章主要介绍了AngularJS动态绑定HTML的方法,结合实例形式分析了AngularJS实现动态绑定HTML的相关操作指令用法与使用注意事项,需要的朋友可以参考下
2016-11-11