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 相关文章推荐
ExtJs的Date格式字符代码
Dec 30 Javascript
jQuery实现下拉框左右选择的简单实例
Feb 22 Javascript
JavaScript 实现鼠标拖动元素实例代码
Feb 24 Javascript
javascript引擎长时间独占线程造成卡顿的解决方案
Dec 03 Javascript
jQuery背景插件backstretch使用指南
Apr 21 Javascript
浅析JavaScript中的变量复制、参数传递和作用域链
Jan 13 Javascript
利用BootStrap弹出二级对话框的简单实现方法
Sep 21 Javascript
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
Nov 25 Javascript
基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑
Dec 14 Javascript
Node.js利用断言模块assert进行单元测试的方法
Sep 28 Javascript
详解webpack与SPA实践之开发环境搭建
Dec 18 Javascript
Js经典案例的实例代码
May 10 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
PHP生成静态页
2006/11/25 PHP
wiki-shan写的php在线加密的解密程序
2008/09/07 PHP
PHP集成百度Ueditor 1.4.3
2014/11/23 PHP
纯PHP代码实现支付宝批量付款
2015/12/24 PHP
详解php中serialize()和unserialize()函数
2017/07/08 PHP
php fread函数使用方法总结
2019/05/28 PHP
PHP优化之批量操作MySQL实例分析
2020/04/23 PHP
用JavaScript仿PS里的羽化效果代码
2011/12/20 Javascript
幻灯片带网页设计中的20个奇妙应用示例小结
2012/05/27 Javascript
验证码按回车不变解决方法
2013/03/29 Javascript
jQuery写的日历(包括日历的样式及功能)
2013/04/23 Javascript
js拖动div 当鼠标移动时整个div也相应的移动
2013/11/21 Javascript
使用requestAnimationFrame实现js动画性能好
2015/08/06 Javascript
js中利用tagname和id获取元素的方法
2016/01/03 Javascript
JS在一定时间内跳转页面及各种刷新页面的实现方法
2016/05/26 Javascript
JS组件Bootstrap Table使用实例分享
2016/05/30 Javascript
Vue实例简单方法介绍
2017/01/20 Javascript
Vue.js常用指令的使用小结
2017/06/23 Javascript
ionic 自定义弹框效果
2017/06/27 Javascript
Vue插件之滑动验证码
2019/09/21 Javascript
分析并输出Python代码依赖的库的实现代码
2015/08/09 Python
python 3利用BeautifulSoup抓取div标签的方法示例
2017/05/28 Python
Python计算斗牛游戏概率算法实例分析
2017/09/26 Python
python实现word 2007文档转换为pdf文件
2018/03/15 Python
python pip源配置,pip配置文件存放位置的方法
2019/07/12 Python
基于Django的乐观锁与悲观锁解决订单并发问题详解
2019/07/31 Python
关于python字符串方法分类详解
2019/08/20 Python
Python基于stuck实现scoket文件传输
2020/04/02 Python
Python matplotlib可视化实例解析
2020/06/01 Python
基于HTML5 Canvas:字符串,路径,背景,图片的详解
2013/05/09 HTML / CSS
KARATOV珠宝在线商店:俄罗斯珠宝品牌
2019/03/13 全球购物
英文留学推荐信范文
2014/01/25 职场文书
王力宏牛津大学演讲稿
2014/05/22 职场文书
写给媳妇的检讨书
2015/05/06 职场文书
JavaScript实现登录窗体
2021/06/22 Javascript
一次SQL如何查重及去重的实战记录
2022/03/13 MySQL