角阵列过滤器功能不起作用答案

【问题标题】：angular array filter function not working角阵列过滤器功能不起作用
【发布时间】：2015-01-01 17:57:54
【问题描述】：

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

<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 - 几乎是最新版本。 是否不再可以使用函数过滤数组？还是我需要为此显式创建过滤器？

【问题讨论】：

调用.toUpperCase() 与过滤有什么关系？ O.o
@Andreas - 我正在尝试将数组中的每个字符串元素转换为大写。这是我要查找的输出：["MIKE", "JOE", "STEVE", "MAURICE", "RON"];
Angular 已经有一个uppercase filter。此外，您需要在不在列表中的单个项目上使用您的此过滤器。否则，您需要将其更改为 plnkr.co/edit/0nvJlWY4nJfFGIn0yoo6?p=preview
你需要简单的使用uppercase filter

标签： javascript arrays angularjs string angularjs-filter

【解决方案1】：

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

见arguments section：

function(value, index)：谓词函数可用于编写任意过滤器。为数组的每个元素调用该函数。最终结果是谓词返回 true 的那些元素的数组。

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

一个例子：-

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

但是，如果您真的想让您的过滤器表达式函数起作用，那么您需要修改数组中的值（第三个参数），但这只会改变源数组本身。 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>

【讨论】：