angularjs – 链接控制器中的角度过滤器,同时使它们可变

前端之家收集整理的这篇文章主要介绍了angularjs – 链接控制器中的角度过滤器,同时使它们可变前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
假设我创建一个Angular应用程序并编写一些新的过滤器:仅显示赔率,并仅显示幸运数字.

有一个oddList过滤器和一个luckyList过滤器:

  1. var app = angular.module('app',[]);
  2. app.filter('oddList',function() {
  3. return function(items) {
  4. var filtered = [];
  5. angular.forEach(items,function(item) {
  6. if (item % 2 !== 0)
  7. filtered.push(item);
  8. });
  9. return filtered;
  10. };
  11. });
  12. app.filter('luckyList',function(item) {
  13. if (item === 2 || item === 7 || item === 11)
  14. filtered.push(item);
  15. });
  16. return filtered;
  17. };
  18. });

在视图部分,我可以链接这些过滤器:

  1. <ul><li ng-repeat="number in numbers | oddList | luckyList">{$number}</li></ul>

当这工作时,我应该看到7和11剩余.

我想让这个ng-repeat的过滤器变量.我能做些什么与这个过程类似吗?

假设我将变量过滤器命名为:listFilter,以便在我们的控制器中,我们可以动态更新$scope.listFilter.

  1. <ul><li ng-repeat="number in numbers | filter:listFilter">{$number}</li></ul>

和伪代码的控制器:

  1. app.controller('main',function($scope,$filter) {
  2. $scope.numbers = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];
  3. $scope.listFilter = $filter('oddList | luckyList');
  4. });

知道如何在控制器中链接(变量)过滤器吗?希望能够在奇怪,幸运和/或两者之间切换.

一种方法是使用函数返回过滤后的数据:
  1. function MainCtrl($scope,15];
  2.  
  3. $scope.filteredNumbers = function() {
  4. var result = $scope.numbers;
  5.  
  6. if ($scope.oddListEnabled) {
  7. result = $filter('oddList')(result);
  8. }
  9. if ($scope.luckyListEnabled) {
  10. result = $filter('luckyList')(result);
  11. }
  12.  
  13. return result;
  14. };
  15. }

和模板:

  1. <ul>
  2. <li ng-repeat="number in filteredNumbers()">
  3. {{number}}
  4. </li>
  5. </ul>

这是一个傻瓜:http://plnkr.co/edit/4ectDA?p=preview

猜你在找的Angularjs相关文章