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

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

# Angular  # ng  # repeat  # 指令  # Angular ng-repeat 对象和数组遍历实例  # angularjs中判断ng-repeat是否迭代完的实例  # AngularJS基础 ng-repeat 指令简单示例  # ng-repeat指令在迭代对象时的去重方法  # 布尔  # 遍历  # 在前面  # 这句  # 都是  # 过了  # 第一个  # 他是  # 其他的  # 用了  # 很简单  # 这个时候  # 两条  # 才对  # 定了  # 在上  # 最简单  # 介绍一下  # 来实现  # 方法来 

相关文章： 浅谈Javascript中的Label语句  宝塔建站无法访问？如何排查配置与端口问题？  如何高效配置香港服务器实现快速建站？  php8.4新语法match怎么用_php8.4match表达式替代switch【方法】  表情包在线制作网站免费,表情包怎么弄？  建站为何优先选择香港服务器？  建站之星代理费用多少？最新价格详情介绍  宝塔建站助手安装配置与建站模板使用全流程解析  清除minerd进程的简单方法  网站图片在线制作软件,怎么在图片上做链接？  开封网站制作公司,网络用语开封是什么意思？  如何在宝塔面板创建新站点？  正规网站制作公司有哪些,目前国内哪家网页网站制作设计公司比较专业靠谱？口碑好？  c# 在ASP.NET Core中管理和取消后台任务  免费制作统计图的网站有哪些,如何看待现如今年轻人买房难的情况？  深圳网站制作平台,深圳市做网站好的公司有哪些？  潮流网站制作头像软件下载,适合母子的网名有哪些？  唐山网站制作公司有哪些,唐山找工作哪个网站最靠谱？  如何选择高效稳定的ISP建站解决方案？  外汇网站制作流程,如何在工商银行网站上做外汇买卖？  如何快速生成凡客建站的专业级图册？  高端云建站费用究竟需要多少预算？  广州营销型建站服务商推荐：技术优势与SEO优化解析  如何获取上海专业网站定制建站电话？  开源网站制作软件,开源网站什么意思？  高端建站如何打造兼具美学与转化的品牌官网？  如何在阿里云虚拟主机上快速搭建个人网站？  义乌企业网站制作公司,请问义乌比较好的批发小商品的网站是什么？  如何在Windows服务器上快速搭建网站？  如何选择香港主机高效搭建外贸独立站？  湖北网站制作公司有哪些,湖北清能集团官网？  网站视频制作书签怎么做,ie浏览器怎么将网站固定在书签工具栏？  制作旅游网站html,怎样注册旅游网站？  购物网站制作公司有哪些,哪个购物网站比较好？  专业商城网站制作公司有哪些,pi商城官网是哪个？  婚礼视频制作网站,学习*后期制作的网站有哪些？  如何通过商城自助建站源码实现零基础高效建站？  如何通过FTP空间快速搭建安全高效网站？  制作销售网站教学视频,销售网站有哪些？  专业网站建设制作报价,网页设计制作要考什么证？  香港服务器租用每月最低只需15元？  如何在阿里云高效完成企业建站全流程？  网站专业制作公司有哪些,做一个公司网站要多少钱？  交易网站制作流程,我想开通一个网站，注册一个交易网址，需要那些手续？  美食网站链接制作教程视频,哪个教做美食的网站比较专业点？  XML的“混合内容”是什么 怎么用DTD或XSD定义  如何快速搭建二级域名独立网站？  广州美橙建站如何快速搭建多端合一网站？  如何获取PHP WAP自助建站系统源码？  大连企业网站制作公司,大连2025企业社保缴费网上缴费流程？