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

JavaScript 前端之家
前端之家收集整理的这篇文章主要介绍了Angular ng-repeat指令实例以及扩展部分，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

@H_404_0@在前面的文章中学习filter过滤器，现在在结合着看看ng-repeat指令，举个例子。


<div class="jb51code">
<pre class="brush:xhtml;">
<div ng-controller="Aaa">
<table border="1">
<tr>
<th ng-click="fnSort('name')">颜色
<th ng-click="fnSort('age')">值
</tr>
<tr ng-repeat="data in dataList">
<td>{{data.name}}</td>
<td>{{data.age}}</td>
</tr>
</table>

@H_404_0@先介绍一下ng-repeat指令，他是用来遍历数据的。

@H_404_0@ng-repeat="data in dataList"，dataList是控制器里的数据，data就好比变量名，视图里的{{data.name}}表示数据里name对象。

@H_404_0@其他的在前面都介绍过了。

@H_404_0@在颜色和值上面绑定了fnSort方法，在fnSort方法里接受类型。

@H_404_0@代码得到一个布尔值，来使用filter的排序方法来控制数据的正反排序。

@H_404_0@上面的例子很简单，我们再为它加上一个搜索的功能！

搜索">

<script type="text/javascript">

var m1 = angular.module('myApp',arguments.callee['fnSort' + type]);
};
$scope.fnSearch = function(){
$scope.dataList = $filter('filter')($scope.dataList,$scope.filterVal);
};
}]);

@H_404_0@我们声明了一个fnSearch方法，接受在视图中的ng-model数据，再使用filter的筛选功能，是不是很方便，回想下如果是用JQ来实现需要多少代码。

@H_404_0@假设我们搜索'l'，那麽yellow和blue会正常的筛选出来。

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

@H_404_0@注意fnSearch方法里的这句代码，$scope.dataList = $filter('filter')($scope.dataList,$scope.filterVal); 我们在$scope.dataList数据里搜索，$scope.dataList在上一次搜索里，就仅剩yellow和blue两条数据，所以就搜索不到关于'r'的数据了，这个时候就声明一个局部的变量，方便第二次搜索依然是完整的数据。

@H_404_0@完整代码：

搜索">

<script type="text/javascript">

var m1 = angular.module('myApp',$filter){
var oriArr = [
{name : 'red',age : 50}
];
$scope.dataList = oriArr;
$scope.fnSort = function(type){
arguments.callee['fnSort' + type] = !arguments.callee['fnSort' + type];
$scope.dataList = $filter('orderBy')($scope.dataList,arguments.callee['fnSort' + type]);
};
$scope.fnSearch = function(){
$scope.dataList = $filter('filter')(oriArr,$scope.filterVal);
};
}]);

@H_404_0@上面用了ng-repeat只是最简单的遍历，现在看看ng-repeat的扩展部分。

@H_404_0@ng-repeat-start以及ng-repeat-end，他们可以灵活控制遍历形式。

@H_404_0@{{data.age}}

{{data.name}}

<script type="text/javascript">
var m1 = angular.module('myApp',[]);
m1.controller('Aaa',function($scope){
$scope.dataList = [
{name : 'red',age : 50}
];
}]);

@H_404_0@除此之外，还有6中扩展方法，还是上面的例子。

    • <script type="text/javascript">

    var m1 = angular.module('myApp',function($scope){
    $scope.dataList = [
    {name : 'red',age : 50}
    ];
    }]);

    @H_404_0@这6中扩展方法除了索引之外，都是布尔类型。

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

    ngngngrepeatrepeat指令指令

    猜你在找的JavaScript相关文章

    Javascript中的事件冒泡与捕获
    事件冒泡和事件捕获 起因：今天在封装一个bind函数的时候，发现el.addEventListener函数支...
    搞懂js中小数运算精度问题原因及解决办法
    js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型，number类型相当于其...
    搞懂：前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理
    什么是跨域 跨域 ： 广义的跨域包含一下内容 ： 1.资源跳转（链接跳转，重定向跳转，表单提...
    前端对base64编码的理解，原生js实现字符base64编码
    @ &quot;TOC&quot; 常见对base64的认知(不完全正确) 首先对base64常见的认知，也是...
    搞懂：MVVM模型以及VUE中的数据绑定数据劫持发布订阅模式
    搞懂：MVVM模式和Vue中的MVVM模式 MVVM MVVM ： 的缩写，说都能直接说出来 ：模型， ：视图...
    js判断浏览器是否支持webGL
    起因是我之前开发的网页，用到了three.js制作了一个3d的旋转球体效果。 在各种浏览器上运行...
    js判断undefined和null
    js判断undefined js判断null js判断null和undefined
    将文字自动转为banner打印形式的工具
    http://patorjk.com/software/taag/
    聊一聊 bootstrap 的轮播图插件
    今天做工作的时候，轻车熟路的做完，又用到了bootstrap的轮播图，觉得有必要安利一下这个插...
    js实现图片无缝循环跑马灯
    html 代码 css js代码 function mylsRunHorseLight() { if (mylsTimer != null) { clearIn...
    HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
    关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作