在前面的文章中学习filter过滤器,现在在结合着看看ng-repeat指令,举个例子。
先介绍一下ng-repeat指令,他是用来遍历数据的。
ng-repeat="data in dataList",dataList是控制器里的数据,data就好比变量名,视图里的{{data.name}}表示数据里name对象。
其他的在前面都介绍过了。
在颜色和值上面绑定了fnSort方法,在fnSort方法里接受类型。
上面的例子很简单,我们再为它加上一个搜索的功能! <script type="text/javascript"> var m1 = angular.module('myApp',arguments.callee['fnSort' + type]); 我们声明了一个fnSearch方法,接受在视图中的ng-model数据,再使用filter的筛选功能,是不是很方便,回想下如果是用JQ来实现需要多少代码。 假设我们搜索'l',那麽yellow和blue会正常的筛选出来。 并没有问题,如果在次输入'r',应该会筛选出red和green才对!可是我们发现什麽都没有。。。 注意fnSearch方法里的这句代码,$scope.dataList = $filter('filter')($scope.dataList,$scope.filterVal); 我们在$scope.dataList数据里搜索,$scope.dataList在上一次搜索里,就仅剩yellow和blue两条数据,所以就搜索不到关于'r'的数据了,这个时候就声明一个局部的变量,方便第二次搜索依然是完整的数据。 完整代码: <script type="text/javascript"> var m1 = angular.module('myApp',$filter){ 上面用了ng-repeat只是最简单的遍历,现在看看ng-repeat的扩展部分。 ng-repeat-start以及ng-repeat-end,他们可以灵活控制遍历形式。 {{data.age}} <script type="text/javascript"> 除此之外,还有6中扩展方法,还是上面的例子。 <script type="text/javascript"> var m1 = angular.module('myApp',function($scope){ 这6中扩展方法除了索引之外,都是布尔类型。 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。 版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。
};
$scope.fnSearch = function(){
$scope.dataList = $filter('filter')($scope.dataList,$scope.filterVal);
};
}]);
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);
};
}]);
var m1 = angular.module('myApp',[]);
m1.controller('Aaa',function($scope){
$scope.dataList = [
{name : 'red',age : 50}
];
}]);
$scope.dataList = [
{name : 'red',age : 50}
];
}]);相关推荐