如何使用ng-repeat制作此过滤器

时间:2017-01-27 18:04:29

标签: angularjs arrays angularjs-ng-repeat ng-repeat

我编写社交媒体应用程序。我在个人资料页面中的个人资料菜单有问题。我希望它是可见的菜单项,具体取决于某些情况。我把菜单项放在这样的数组中;

$scope.menuitems = [
    {id : "1", name : "Message", show : "other", url : ""},
    {id : "2", name : "Follow", show : "other", url : ""},
    {id : "3", name : "Followers", show : "all", url : ""},
    {id : "4", name : "About", show : "all", url : ""},
    {id : "5", name : "Statistics", show : "all", url : ""},
    {id : "6", name : "Edit", show : "own", url:""}
];

如果可见配置文件是用户自己的配置文件,我想要打印“show”值为“own”的项目。如果可见配置文件是另一个用户的配置文件,我想打印“显示”值为“其他”的项目。我想打印每个stuation中'show'值'all'的项目。我为此做了一些关于互联网的研究,但我想我找不到正确的话。我如何使用Angularjs上的ng-repeat进行此操作?

1 个答案:

答案 0 :(得分:2)

创建自定义过滤器

    $scope.conditionVar = 'own'; //this will change depending on what profile

    angular.module('myFilters', []).
  filter('profilefilter', function() {
    return function(items, condition) {
      var out = [];
      for (var i in items) {
        var item = items[i];
        if (item.show === 'all' || item.show === condition) {
            out.push(item);
        }
      }
      return out;
    }
  });
    <li ng-repeat="menuitem in menuitems | profilefilter:conditionVar">{{menuitem}}</li>

这是工作演示 - https://jsfiddle.net/0o7ewpgd/1/