angular 数组过滤功能不工作

Question

我正在使用一个函数作为数组的过滤器，但数组没有被过滤。
代码如下：

<script>
    var app = angular.module('myApp',[]);
    app.controller('myController', [function(){
        var self=this;
        self.name = ["mike", "joe", "steve", "maurice", "ron"];
        self.toUpper = function(element){
            return element.toUpperCase();
        }
    }]);

</script>

<div ng-controller="myController as ctrl">
    <h1>Hello {{ctrl.name|filter:toUpper}}</h1>
</div>

我正在使用 Angular 1.3.X - 几乎是最新版本。 是否不再可以使用函数过滤数组？或者我是否需要为此明确创建过滤器？

Answer 1

您的过滤函数只是一个表达式，angular 过滤器使用它来过滤掉所提供列表中的项目。如果你 return 一个真值，它将成为结果列表的一部分，否则它不会只是。在您的情况下，您只是 return 将值转换为大写，而不是真正更新值。

见arguments section：

function(value, index): A predicate function can be used to write arbitrary filters. The function is called for each element of array. The final result is an array of those elements that the predicate returned true for.

您只需要使用现有的 uppercase filter，它应该与项目一起使用而不是列表。

一个例子：-

<ul>
   <li ng-repeat="nm in ctrl.name">{{nm | uppercase}}</li>
</ul>

但是，如果您真的想让过滤器表达式函数起作用，那么您需要修改数组中的值（第 3 个参数），但这只会更改源数组本身。 Like here

    self.toUpper = function(element, idx, list){
       return list[idx] =  element.toUpperCase();
    }

并且请记住视图过滤器运行每个摘要周期至少两次，所以你真的应该根据它们是否只是一次格式化来选择是否真的需要 DOM 过滤器.如果一次性格式化，请在设置视图模型本身时在控制器上执行。

self.name.map(function(name){ return name.toUpperCase();  });

虽然这样做没有多大意义（在显示的列表上应用过滤器），但您需要创建一个过滤器以便不更改源数组本身。

  app.filter('toUpperList', function(){
      return function(itm){
        if(!angular.isArray(itm)) return;
        return itm.map(function(itm){ return itm.toUpperCase() });
      }
    });

和

  <h1>Hello {{ctrl.name | toUpperList}}</h1>

angular 数组过滤功能不工作

angular array filter function not working

javascript

arrays

string

angularjs

angularjs-filter