Question

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

标记

......但是它的输出：

中号
一个
- [R
ķ

以下是我的观点：

  <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

我的自定义过滤器输出如何＆＃34;标记＆＃34;？

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将依赖具有length属性的值和[]下标。）

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

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

Answer 3

我强烈建议不要写额外的代码。它就像重新发明轮子一样。而是坚持一般程序并过滤掉它。您的朋友阵列中的一个小变化将以最少的编码获得更好的结果。使用角度来最小化您的编码。

    <!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'}];
});

Answer 4

尝试以下更新过滤器。您正在返回String，而您应该返回一个数组。这就是为什么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;
    };
});

带参数的AngularJS自定义过滤器

4 个答案: