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

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

请参阅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>

角阵滤波器功能不起作用

1 个答案: