从 ng-repeat 数组中过滤出具有空属性的对象

Question

我有这个数组在范围内：

$scope.randomArray = [
      {
        prop1: 'val1',
        prop2: {
          value: '3',
          unit: 'l'
        }
      },
      {
        prop1: 'val2'
      },
      {
        prop1: 'val3',
        prop2: {
          value: '10',
          unit: 'l'
        }
      }
    ];

尝试仅对具有prop2 属性集的对象进行 ng-repeat。如果没有必要，我不会为此创建单独的过滤器或范围函数，因此我尝试了描述here 和here 的解决方案：

<div ng-repeat="random in randomArray | filter : { prop2 : '!!'}">
  {{random}}
  </div>

但它不起作用。

这里是 mcve：https://codepen.io/neptune01/pen/eWRBKd

Answer 1

我想出的解决方案是这个。使用 ng-if 表示 random.prop2。这适用于 prop2 不为空/未定义的情况。这是你的情况。对于任何其他过滤，您可以使用其他方法

<div ng-app="app">
<div ng-controller="appCtrl">

  <div ng-repeat="random in randomArray" ng-if="random.prop2">
  {{random}}
  </div>

  </div>
</div>

Answer 2

试试这个。

var app = angular.module('app', [])
.controller('appCtrl', ['$scope',
  function($scope) {
    $scope.randomArray = [
      {
        prop1: 'val1',
        prop2: {
          value: '3',
          unit: 'l'
        }
      },
      {
        prop1: 'val2'
      },
      {
        prop1: 'val3',
        prop2: {
          value: '10',
          unit: 'l'
        }
      }
    ];
  }]);
  app.filter('check', function() {
  return function(items, tagName) {
    var filtered = [];
    angular.forEach(items, function(el) {
      if(el['prop2'] != undefined) {
        filtered.push(el);
      }
    });
    return filtered;
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>

<div ng-app="app">
<div ng-controller="appCtrl">
             
  <div ng-repeat="random in randomArray | check:'prop2'">
  {{random}}
  </div>
  
  </div>
</div>