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 相关文章推荐
JS面向对象、prototype、call()、apply()
May 14 Javascript
jquery 得到当前页面高度和宽度的两个函数
Feb 21 Javascript
jQuery(非HTML5)可编辑表格实现代码
Dec 11 Javascript
网页实时显示服务器时间和javscript自运行时钟
Jun 09 Javascript
Node.js中调用mysql存储过程示例
Dec 20 Javascript
详解JavaScript的AngularJS框架中的作用域与数据绑定
Mar 04 Javascript
JavaScript必知必会(三) String .的方法来自何方
Jun 08 Javascript
Windows系统下安装Node.js的步骤图文详解
Nov 15 Javascript
使用JavaScript触发过渡效果的方法
Jan 19 Javascript
Bootstrap fileinput组件封装及使用详解
Mar 10 Javascript
jQuery常用选择器详解
Jul 17 jQuery
vue router带参数页面刷新或回退参数消失的解决方法
Feb 27 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
150kHz到30Mhz完全冲浪手册
2020/03/20 无线电
php中目录,文件操作详谈
2007/03/19 PHP
PHP 模拟登陆MSN并获得用户信息
2009/05/16 PHP
处理php自动反斜杠的函数代码
2010/01/05 PHP
一次因composer错误使用引发的问题与解决
2019/03/06 PHP
select组合框option的捕捉实例代码
2008/09/30 Javascript
jQuery中delegate和on的用法与区别详细解析
2014/01/26 Javascript
javascript中alert()与console.log()的区别
2015/08/26 Javascript
javascript结合Flexbox简单实现滑动拼图游戏
2016/02/18 Javascript
JavaScript 中有关数组对象的方法(详解)
2016/08/15 Javascript
基于jQuery实现表格内容的筛选功能
2016/08/21 Javascript
jquery,js简单实现类似Angular.js双向绑定
2017/01/13 Javascript
jQuery 实现左右两侧菜单添加、移除功能
2018/01/02 jQuery
浅析vue-router原理
2018/10/19 Javascript
JAVA面试题 static关键字详解
2019/07/16 Javascript
微信小程序实现电子签名并导出图片
2020/05/27 Javascript
[01:22:28]DOTA2-DPC中国联赛 正赛 SAG vs RNG BO3 第一场 1月18日
2021/03/11 DOTA
python脚本爬取字体文件的实现方法
2017/04/29 Python
python学习笔记--将python源文件打包成exe文件(pyinstaller)
2018/05/26 Python
Python使用folium excel绘制point
2019/01/03 Python
Python中遍历列表的方法总结
2019/06/27 Python
python删除列表元素的三种方法(remove,pop,del)
2019/07/22 Python
Python 多线程其他属性以及继承Thread类详解
2019/08/28 Python
python mysql 字段与关键字冲突的解决方式
2020/03/02 Python
Django中的session用法详解
2020/03/09 Python
分享一枚pycharm激活码适用所有pycharm版本我的pycharm2020.2.3激活成功
2020/11/20 Python
士力架广告词
2014/03/20 职场文书
信用社竞聘演讲稿
2014/05/16 职场文书
英语系毕业生求职信
2014/07/13 职场文书
影视广告专业求职信
2014/09/02 职场文书
老人与海读书笔记
2015/06/26 职场文书
2019公司管理制度
2019/04/19 职场文书
创业计划书之少年玩具店
2019/09/05 职场文书
Django实现WebSocket在线聊天室功能(channels库)
2021/09/25 Python
MySql中的json_extract函数处理json字段详情
2022/06/05 MySQL
基于Android10渲染Surface的创建过程
2022/08/14 Java/Android