我需要在AngularJS中过滤一个数组

时间:2014-05-05 20:36:31

标签: javascript angularjs filter angularjs-ng-repeat

我需要过滤下面显示的数组"所有权限值"在服务器上发送它。这是一个例子。谢谢你的帮助。
<!DOCTYPE html>
    <html ng-app>
    <head>
        <script src="./angular.js"></script>
    <script>

        function MainCtrl($scope) {
            $scope.accounts = [{ name: 'KL', company: 'Alpha', permission: 'all'},
                               { name: 'Jem', company: 'Altes', permission: 'no' },
                               { name: 'Osama', company: 'Solar', permission: 'no' },
                               { name: 'Victor', company: 'Osteriks', permission: 'all' }];

            // I'd like to get here a filtered array by "all permission" from the View block filter

            $scope.filteredAccounts = // [ { name: 'KL', company: 'Alpha', permission: 'all'},
                                    //  { name: 'Victor', company: 'Osteriks', permission: 'all' }];
        }
    </script>
    </head>
    <body ng-controller="MainCtrl">
        <div ng-repeat="account in accounts | filter: { permission: 'all' }">
            <p>{{ account.name }}</p>
        </div>
    </body>
    </html>

3 个答案:

答案 0 :(得分:0)

最简单的方法是使用lodash并编写

$scope.filteredAccounts = _.where($scope.accounts,{permission: 'all'});

答案 1 :(得分:0)

您可以在AngularJS中编写自定义过滤器。以下是指向如何创建一个文档的文档的链接:https://docs.angularjs.org/tutorial/step_09

您的自定义过滤器可能如下所示:

myApp.filter('permissionFilter', function () {
    return function (accounts, permission) {
        var filtered = [];
        angular.forEach(accounts, function (account) {
          if (account.permission === permission) {
            filtered.push(account);
          }
        });
        return filtered;
    };
});

使用方式如下:

  <div ng-controller="MainController">
    <div ng-repeat="account in accounts | permissionFilter:'all'">
      <p>{{ account.name }}</p>
    </div>
  </div>

这将允许您使用此过滤器来过滤任何类型的权限。换句话说,您可以将'all'更改为'no',它将返回Jem和Osama。您可以更进一步并绑定到过滤器变量,这样您就可以让用户根据它来决定他们想要过滤的内容。

这是一个Plunker,其中有一个工作示例。

答案 2 :(得分:0)

我没有想在我的项目中包含下划线或lodash只是因为我想要findWhere函数所以我将它添加到角度来自我:

简单地将此包含在angular之外并更改&#34; angular.element(document)&#34;到您启动应用程序的元素。

angular.findWhere = function(collection,search) { var $filter = angular.element(document).injector().get("$filter"), refined = $filter('filter')(collection,search); return refined[0]; }

然后你就这样使用它:

angular.findWhere($scope.accounts,{permission: 'all'});