Angular ng-repeat指令实例以及扩展部分


Posted in Javascript onDecember 26, 2016

在前面的文章中学习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会正常的筛选出来。

Angular ng-repeat指令实例以及扩展部分

并没有问题,如果在次输入'r',应该会筛选出red和green才对!可是我们发现什麽都没有。。。

Angular ng-repeat指令实例以及扩展部分

注意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指令实例以及扩展部分

 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
解放web程序员的输入验证
Oct 06 Javascript
javascript 正则表达式相关应介绍
Nov 27 Javascript
javascript之典型高阶函数应用介绍二
Jan 10 Javascript
jQuery实用基础超详细介绍
Apr 11 Javascript
封装好的javascript前端分页插件pagination
Jan 04 Javascript
js 开发之autocomplete=&quot;off&quot;在chrom中失效的解决办法
Sep 28 Javascript
JQuery选中select组件被选中的值方法
Mar 08 jQuery
原生js检测页面加载完毕的实例
Sep 11 Javascript
代码整洁之道(重构)
Oct 25 Javascript
Vue数据绑定实例写法
Aug 06 Javascript
vue中使用极验验证码的方法(附demo)
Dec 04 Javascript
Javascript摸拟自由落体与上抛运动原理与实现方法详解
Apr 08 Javascript
详解Angular的内置过滤器和自定义过滤器【推荐】
Dec 26 #Javascript
Angular路由简单学习
Dec 26 #Javascript
详解Angular的双向数据绑定(MV-VM)
Dec 26 #Javascript
Angular工具方法学习
Dec 26 #Javascript
angular双向绑定模拟探索
Dec 26 #Javascript
jquery Banner轮播选项卡
Dec 26 #Javascript
Javascript中常用类型的格式化方法小结
Dec 26 #Javascript
You might like
利用浏览器的Javascript控制台调试PHP程序
2014/01/08 PHP
模拟jQuery ajax服务器端与客户端通信的代码
2011/03/28 Javascript
javascript Event对象详解及使用示例
2013/11/22 Javascript
动态的创建一个元素createElement及删除一个元素
2014/01/24 Javascript
AngularJS上拉加载问题解决方法
2016/05/23 Javascript
AngularJS实现星星等级评分功能
2016/09/24 Javascript
想用好React的你必须要知道的一些事情
2017/07/24 Javascript
关于react中组件通信的几种方式详解
2017/12/10 Javascript
vue cli webpack中使用sass的方法
2018/02/24 Javascript
微信小程序基础教程之worker线程的使用方法
2019/07/15 Javascript
vue 数据双向绑定的实现方法
2021/03/04 Vue.js
python函数返回多个值的示例方法
2013/12/04 Python
Python定时执行之Timer用法示例
2015/05/27 Python
Python实现pdf文档转txt的方法示例
2018/01/19 Python
解决python 输出是省略号的问题
2018/04/19 Python
python 处理telnet返回的More,以及get想要的那个参数方法
2019/02/14 Python
Python3 翻转二叉树的实现
2019/09/30 Python
Python Django框架模板渲染功能示例
2019/11/08 Python
浅谈python元素如何去重,去重后如何保持原来元素的顺序不变
2020/02/28 Python
html5的localstorage详解
2017/05/09 HTML / CSS
HTML5本地数据库基础操作详解
2016/04/26 HTML / CSS
Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码
2020/03/17 HTML / CSS
英语系毕业生自荐信
2013/10/31 职场文书
酒店实习个人鉴定
2013/12/07 职场文书
职业生涯规划怎么写
2013/12/29 职场文书
高一地理教学反思
2014/01/18 职场文书
结婚周年感言
2014/02/24 职场文书
第一批党的群众路线教育实践活动工作总结
2014/03/03 职场文书
宝宝满月酒主持词和仪式流程
2014/03/27 职场文书
竞聘书怎么写,如何写?
2014/03/31 职场文书
应届硕士毕业生自荐信
2014/05/26 职场文书
优秀大学生自荐信
2014/06/09 职场文书
2014年服装销售工作总结
2014/11/27 职场文书
2015年九一八事变纪念日演讲稿
2015/03/19 职场文书
Python 中数组和数字相乘时的注意事项说明
2021/05/10 Python
Django集成富文本编辑器summernote的实现步骤
2021/05/31 Python