AngularJS 带参数的自定义过滤器

Question

我的自定义过滤器应该输出：

马克

...但是输出：

男
一个
r
k

这是我的观点：

  <body ng-controller="MainCtrl">
    <ul>
      <li ng-repeat="friend in friends | myFriend:currentUser">
        {{ friend }}
      </li>
    </ul>
  </body>

...和控制器：

var app = angular.module('plunker', []);

app.filter('myFriend', function () {
  return function (items, currentUser) {
    console.log(items);
    console.log(currentUser);
    for (var i = 0; i < items.length; i++) {
      if (items[i] === currentUser) {
        return items[i];
      }
    }

  };
});

app.controller('MainCtrl', function($scope) {
  $scope.currentUser = 'Mark';
  $scope.friends = ['Andrew', 'Will', 'Mark', 'Alice', 'Todd'];
});

这是我的 Plunker： http://plnkr.co/edit/JCKAt05MPlrvIZBCGO0n?p=preview

我的自定义过滤器如何输出 "Mark"？

Answer 1

那是因为您传递的是过滤器中的字符串而不是字符串数组。 ng-repeat 将遍历字符串 Mark 的字符（字符串是字符数组）并显示它。您需要将数组传递给 ng-repeat。在将源应用到 ng-repeat 之前，先过滤运行。示例：

for (var i = 0; i < items.length; i++) {
  if (items[i] === currentUser) {
    return [items[i]];
  }
}

在您的特定情况下，您也可以按照以下方式执行操作，而无需创建任何自定义过滤器：

 <li ng-repeat="friend in friends | filter:currentUser:true">
  {{ friend }}
</li>

Answer 2

我想您已经知道过滤器正在应用于好友列表。

您的过滤器返回单个字符串值。

你的 ng-repeat 可以认为是：

ng-repeat="friend in (friends | myFriend:currentUser)"

这意味着您正在尝试遍历 myFriend 过滤器返回的字符串。对于浏览器，您在字符串上使用 ng-repeat 循环遍历字符串中的每个字符。

（注意：这可能不会在每个浏览器上发生，因为某些浏览器（例如 IE7）do not allow [] subscripting on strings。（在这一切之下，ng-repeat 将依赖长度为属性的值和 [] 下标。）

以下可能会产生您想要的结果（假设您只想从列表中显示一个名字）

  <body ng-controller="MainCtrl">
    <ul>
      <li>
        {{ friends | myFriend:currentUser }}
      </li>
    </ul>
  </body>

Answer 3

试试下面更新的过滤器。您正在 returning 字符串，而您应该 return 一个数组。这就是为什么 ng-repeat 将 String 视为数组并迭代每个字母的原因。

app.filter('myFriend', function () {
    return function (items, currentUser) {
        console.log(items);
        console.log(currentUser);
        var finalItems = [];
        for (var i = 0; i < items.length; i++) {
            if (items[i] === currentUser) {
                finalItems.push(items[i]);
            }
        }
        return finalItems;
    };
});

Answer 4

我的强烈建议是不要编写额外的代码。这就像重新发明轮子。而是坚持一般程序并将其过滤掉。在你的朋友数组中做一个小的改变，你可以用最少的代码得到更好的结果。使用 angular 来最小化您的编码。

    <!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.2/angular.js" data-semver="1.4.2"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <ul>
      <li ng-repeat="friend in friends | filter:{name:currentUser}">
        {{ friend.name }}
      </li>
    </ul>
  </body>

</html>

app.js

app.controller('MainCtrl', function($scope) {
  $scope.currentUser = 'Mark';
  $scope.friends = [{'name':'Andrew'}, {'name':'Will'}, {'name':'Mark'}, {'name':'Alice'}, {'name':'Todd'}];
});

AngularJS 带参数的自定义过滤器

AngularJS Custom Filter with Argument

javascript

angularjs

angularjs-filter