使用 ng-repeat 隐藏数组内的对象答案

【问题标题】：hide objects inside array using ng-repeat使用 ng-repeat 隐藏数组内的对象
【发布时间】：2016-05-30 10:42:08
【问题描述】：

我正在使用 MEAN 堆栈，我在一个数组中拥有多个用户条目，例如：

 { bankDetails: [],
  academics: [ [Object], [Object] ],
   trainings: [ [Object] ],
   username: 'sfdf@gmail.afsadfcom',
   accessLevel: 'worker',
   __v: 0},`
 { bankDetails: [],
  academics: [ [Object], [Object] ],
  trainings: [ [Object] ],
  username: 'acbckd@gmail.afsadfcom',
   accessLevel: 'admin',
    __v: 0} and many objects like these.

我从服务器获取并存储在 vm.empDetails 中：

 $http.get('/employee').then(function(res) {
        console.log(res.data);
         vm.empDetails = res.data;
    }, function(err) {
         console.log(err);
     });

现在我在 html 文件中所做的是：

  <tr ng-repeat="res in vm.empDetails track by $index">             
           <td>{{res.firstName}} {{res.lastName}}</td>
              <td>{{res.jobTitle}}</td>
               <td><md-button ng-click="vm.manageProfile(res._id)">Manage</md-button></td></tr>

我正在获取存储在员工集合中并可以显示它们的所有数据。 我要做的只是只显示 access_level = "worker" 并希望使用 access_level="admin" 隐藏用户的条目。我该怎么做？？任何建议和 cmets 都非常感谢。

【问题讨论】：

标签： angularjs filter ng-repeat ng-hide

【解决方案1】：

<tr ng-repeat="res in vm.empDetails track by $index" ng-show="res.access_level === 'worker'"> 
  // something
</tr>

【讨论】：

【解决方案2】：

<tr ng-repeat="res in vm.empDetails track by $index | filter:customFilter">

您可以使用customFilter 过滤掉access_level 为admin 的项目

app.filter('customFilter', function() {
    return function( items ) {
      var filtered = [];
      angular.forEach(items, function(item) {
        if(item.hasOwnProperty("access_level") && !item.access_level === "admin")
            filtered.push(item);
      });
      return filtered;
    };
});

【讨论】：

Angular filter 可以跟踪项目的属性并根据您传递的值进行过滤。无需自定义过滤器。
@AranS：你不需要......但有时拥有自己的 customFilter 更好，因为它提供了更多的优势，可以将其他业务规则应用于同一个对象......它只是一个选择和决定。
我成功了，你们太棒了！！

【解决方案3】：

你可以使用过滤器：

<tr ng-repeat="res in vm.empDetails track by $index | filter: {accessLevel: 'worker'})">             
           <td>{{res.firstName}} {{res.lastName}}</td>
              <td>{{res.jobTitle}}</td>
               <td><md-button ng-click="vm.manageProfile(res._id)">Manage</md-button></td></tr>

【讨论】：