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 相关文章推荐
Chrome Form多次提交表单问题的解决方法
May 09 Javascript
让人期待的2011年度最佳 jQuery 插件分享
Mar 16 Javascript
jQuery中hover方法和toggle方法使用指南
Feb 27 Javascript
JS设置cookie、读取cookie、删除cookie
Apr 17 Javascript
js实现模拟计算器退格键删除文字效果的方法
May 07 Javascript
js 数据存储和DOM编程
Feb 09 Javascript
js实现二级导航功能
Mar 03 Javascript
Bootstrap 设置datetimepicker在屏幕上面弹出设置方法
Mar 21 Javascript
bootstrap基本配置_动力节点Java学院整理
Jul 14 Javascript
原生js实现简单的模态框示例
Sep 08 Javascript
vue.js使用v-pre与v-html输出HTML操作示例
Jul 07 Javascript
解决vue的变量在settimeout内部效果失效的问题
Aug 30 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读取和编写XML DOM的实现代码
2011/02/03 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
thinkPHP5框架接口写法简单示例
2019/08/05 PHP
JavaScript的Function详细
2006/11/14 Javascript
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
2013/04/19 Javascript
Javascript基础教程之数据类型 (数值 Number)
2015/01/18 Javascript
jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)
2016/03/14 Javascript
JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法
2016/04/18 Javascript
详解jQuery UI库中文本输入自动补全功能的用法
2016/04/23 Javascript
JS简单实现获取元素的封装操作示例
2017/04/07 Javascript
利用JavaScript在网页实现八数码启发式A*算法动画效果
2017/04/16 Javascript
JavaScript 保护变量不被随意修改的实现代码
2017/09/27 Javascript
AngularJS对动态增加的DOM实现ng-keyup事件示例
2018/03/12 Javascript
vue-baidu-map 进入页面自动定位的解决方案(推荐)
2018/04/28 Javascript
React Form组件的实现封装杂谈
2018/05/07 Javascript
让axios发送表单请求形式的键值对post数据的实例
2018/08/11 Javascript
在vue项目中使用codemirror插件实现代码编辑器功能
2019/08/27 Javascript
粗略分析Python中的内存泄漏
2015/04/23 Python
Python实现七彩蟒蛇绘制实例代码
2018/01/16 Python
Python 字符串与二进制串的相互转换示例
2018/07/23 Python
实例介绍Python中整型
2019/02/11 Python
对Python生成器、装饰器、递归的使用详解
2019/07/19 Python
python_matplotlib改变横坐标和纵坐标上的刻度(ticks)方式
2020/05/16 Python
Python爬虫破解登陆哔哩哔哩的方法
2020/11/17 Python
详解如何使用rem或viewport进行移动端适配
2020/08/14 HTML / CSS
GANT英国官方网上商店:甘特衬衫
2018/02/06 全球购物
缓解脚、腿和背部疼痛:Z-CoiL鞋
2019/03/12 全球购物
Speedo速比涛德国官方网站:世界领先的泳装品牌
2019/08/26 全球购物
SOKOLOV官网:俄罗斯珠宝首饰品牌
2021/01/02 全球购物
恶意软件的定义
2014/11/12 面试题
继承时候类的执行顺序问题,一般都是选择题,问你将会打印出什么?
2015/11/18 面试题
大四本科生的自我评价
2013/12/30 职场文书
统计岗位职责
2014/02/21 职场文书
公司授权委托书范本
2014/04/03 职场文书
2015年国培研修感言
2015/08/01 职场文书
JavaScript+HTML实现学生信息管理系统
2021/04/20 Javascript