Question

我目前正在使用Angular制作前端。我有一个JSON文件，如下所示：

{
    "groups": [
           group1: {
                    "part":1
                   },
           group2: {
                    "part":2
                   }
              ]
}

我有以下列表：

<li ng-class="{active: section >= {{group.number}}}" ng-bind="group.title" ng-repeat="group in groups" ></li>

我们说我的JSON文件中有100个组。如果我只想显示包含"part":1的群组，如何在ng-repeat中添加此过滤器？

Answer 1

您可以使用要过滤的键/值将对象传递给# Revoke access of currently logged in user DELETE /me/permissions # Or if you want to revoke access for a specific user DELETE /{user-id}/permissions：

filter

Answer 2

试试这个

ng-repeat="group in groups | filter:{'part': 1}:true"

来自官方文件

在HTML模板绑定中 {{filter_expression |过滤器：表达式：比较}}

表示比较器值true

true：函数的简写（实际，预期）{return angular.equals（actual，expected）}。这基本上是严格的预期和实际的比较。

这给你完全匹配

Answer 3

还要考虑将function而非Object传递给filter（这可能会有效，但并非所有内容都可以直接在视图中以可读的方式表达）：< / p>

ng-repeat="group in groups | filter:functionOnScope"

|管道对左边的groups进行操作，因此filter是一个函数，其第一个参数接收groups，其后续参数出现在{{ 1}}。您可以将:可视化为a | b:c:d | e - 一旦我意识到我更多地使用过滤器来处理简单的事情。

所以第二个参数e(b(a,c,d))收到的是一个谓词（接受某些内容并返回filter或true以对每个元素进行操作的函数 - 就像一个SQL {WHES子句）在false内。过滤器非常有用 - 如果您想在视图中进行快速逻辑或转换（并且您不需要对其进行测试），那么它们可以使您的控制器和指令更加简洁。（因此，您可以编写groups而不是ng-if="collection[collection.length - 1].length > 0"，而不是ng-if="collection | last | some"。

如果您有复杂的逻辑，最好放入一个控制器或指令而不是视图（如果您关心它，这也更容易进行单元测试） - 如果它在视图中你需要类似的东西PhantomJS至少可以模拟DOM。假设您将dynamicallySelectedPart上的一些$scope绑定到1，2等，可能ng-model上的<select />，这样用户就可以选择它，然后你可以写它以使它保持动态最新。

$scope.functionOnScope = function (elementInGroups) {
    // Maybe do a check like:
    // if ($scope.dynamicallySelectedPart === elementInGroups.part) {
    return true;
    // }

    // Some other logic...
    return false;
};

Answer 4

您的JSON看起来格格不入，因为您有一个包含键值对的数组。
下面是一些应该有用的代码。我正在使用Controller ViewAs语法。

HTML

<div ng-app="MyApp">
<div ng-controller="MyController as me">
  {{me.greeting}}
  <ul>
    <li ng-repeat="group in me.groups | filter:{'part': 1}:true">
      {{group}}
    </li>
   </ul>
</div>

JS

var myApp = angular.module('MyApp',[]);

myApp.controller('MyController', function() {
  this.greeting = 'Hola!';

  this.groups = [ {id: 'group1', "part":1 }, {id: 'group2',  "part":2 } ];
});

Code Pen Here

将过滤器添加到ng-repeat

4 个答案: