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

【问题标题】：Angular.js: filter ng-repeat by absent key/valueAngular.js：通过缺少键/值过滤 ng-repeat
【发布时间】：2014-07-24 06:49:03
【问题描述】：

我想过滤 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，仅显示 Andorra。

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

【问题讨论】：

标签： javascript angularjs filtering angularjs-ng-repeat ng-repeat

【解决方案1】：

总是可以制作自定义过滤器：

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

过滤器

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

【讨论】：

@Blackhole -- 哈，该死的，这只是在你关心订单的情况下！ :) 编辑！

【解决方案2】：

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

$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（在这个演示中我还从阿根廷删除了一个属性）

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案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

【讨论】：

【解决方案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>

【讨论】：