Question

我想过滤ng-repeat，以便它只显示所有键/值对都存在的行。

HTML

<div ng-app="myApp" ng-controller="oneController">
<table class="table table-bordered table-hover">
  <thead>
    <tr>
      <th>Country</th>
      <th>1960</th>
      <th>1970</th>
    </tr>
    <tbody>
      <tr ng-repeat="country in countries | orderBy: country.name">
        <td>{{country.name}}</td>
        <td>{{country.1960 | number}}</td>
        <td>{{country.1970 | number}}</td>
      </tr>
    </tbody>
</table>

的Javascript

angular.module('myApp', []).
controller('oneController', function($scope) {
  $scope.countries = [
      {"name":"Aruba", "1960":"1567"},
     {"name":"Andorra","1960":77865,"1970":78360},
  ];
});

所以，在这个例子中，我不希望Aruba显示，只有安道尔。

完整示例@ CSSDeck ：http://cssdeck.com/labs/1aksiuuu（我不希望显示Aruba）

Answer 1

始终可以制作自定义过滤器：

<tr ng-repeat="country in countries | filter:allProperties | orderBy: country.name">

过滤器

$scope.allProperties = function(item) {
    return item.name && item.1960 && item.1970
}

Answer 2

一种解决方案是使用filter filter：

<tr ng-repeat="country in countries | filter:{name: '', 1960: '', 1970: ''} | orderBy:'name'">

Answer 3

扩展自定义过滤器概念，我认为重点是您不知道任何给定对象可能缺少哪个属性。通过循环遍历所有对象中的所有属性，您可以创建至少一个对象上存在的每个属性的主列表：

$scope.properties = function(){
  var props = [];    
  angular.forEach($scope.countries, function(country){
    for(var prop in country){
      if(props.indexOf(prop) == -1)
        props.push(prop);
    }
  });
  return props;
};

现在你可以创建一个过滤函数来检查这个列表：

$scope.hasAllProperties = function(item){
  var found = true;
  angular.forEach($scope.properties(), function(prop){
    if(item[prop] == undefined){
      found = false;
      return;
    }
  });
  return found;
}

HTML：

<tr ng-repeat="country in countries | filter: hasAllProperties | orderBy: country.name">

您可能希望缓存属性的主列表，以减少调用$scope.properties()的次数。

Demo（我还在此演示中删除了阿根廷的一处房产）

Answer 4

在控制器内创建一个过滤器，如下所示：

 $scope.search = function (item){
    return item.hasOwnProperty("1970");
  };

使用如下过滤器：

<tr ng-repeat="country in countries | filter:search | orderBy: country.name">

分叉您的新网址：http://cssdeck.com/labs/kggmrzow

Answer 5

试试这个：

<tr ng-repeat="country in countries | orderBy: country.name">
  <label ng-show="country.1960!=undefined && country.1970!=undefined">
    <td>{{country.name}}</td>
    <td>{{country.1960 | number}}</td>
    <td>{{country.1970 | number}}</td>
  </label>
</tr>

Angular.js：通过缺少键/值过滤ng-repeat

5 个答案: