如何检查数组中对象列表的至少一个值在Angular中是否为真？

Question

在我的网站上，我有一个数组，其中还包含另一个带有一些值的数组：

[
    {
        "name": "Pete",
        "place": "HOME",
        "houses": [
            {
                "key": "OFFICE",
                "value": false
            },
            {
                "key": "HOME",
                "value": true
            },
            {
                "key": "SHOP",
                "value": true
            }
        ]
    },
    {
        "name": "William",
        "place": "OFFICE",
        "houses": [
            {
                "key": "OFFICE",
                "value": false
            },
            {
                "key": "HOME",
                "value": false
            },
            {
                "key": "SHOP",
                "value": false
            }
        ]
    }
]

我遍历两个对象很好，但我只是想遍历所有的houses ，如果的至少一个value第houses是真的。 因此，对于皮特，我想遍历房屋，但对威廉而言。 我目前有以下代码：

<div ng-repeat="person in persons">
    {{ person.name }} in {{ person.place }} 
    <div ng-if="WHAT TO PUT HERE TO CHECK IF AT LEAST ONE OF THE VALUES IS TRUE??">
        has got the following houses: 
        <span ng-repeat="house in person.houses">
            <span ng-if="house.value">{{ house.key }} / </span>
        </span>
    </div>
</div>

但是我不知道在ng-if中输入什么来检查s的value是否为真。 有人知道我该怎么解决吗？

Answer 1

将标志分配给父对象，简单的实现就是这样

var people = [ /*your long array ommited*/ ];
angular.forEach(people, function(person){
    //checking length of (get house in person.houses where house.value === true)
    person.has_true_house = person.houses.some(function(item){
        return item.value === true;
    });
});

然后在您看来

<div ng-repeat="person in persons">
    {{ person.name }} in {{ person.place }} 
    <div ng-if="person.has_true_house">
        has got the following houses: 
        <span ng-repeat="house in person.houses">
            <span ng-if="house.value">{{ house.key }} / </span>
        </span>
    </div>
</div>

Answer 2

解决此问题的最佳方法是过滤控制器中的人员数组：

app.controller('MainCtrl', function($scope) {

  // Your original data
  $scope.persons = [...];

  // Initialize filtered persons
  $scope.filteredPersons = [];

  // Update filtered persons when persons are updated
  $scope.$watch('persons', function(persons){
    $scope.filteredPersons = filterPersons($scope.persons);
  });

});

// Pure function to filter the data you need
function filterPersons(persons){
  var filteredPersons = [];
  persons.forEach(function(person){
    var truthyHouses = person.houses.filter(function(house){
      return house.value === true;  
    });
    if(truthyHouses.length > 0){
      filteredPersons.push(person);
    }
  });
  return filteredPersons;
}

这将大大简化您的视图，因为控制器已经为您提供了过滤后的数据：

<div ng-repeat="person in filteredPersons">
    {{ person.name }} in {{ person.place }} has got the following houses: 
    <ul>
      <li ng-repeat="house in person.houses">
        {{ house.key }}
      </li>
    </ul>
</div>

我在这里为您制造了一个工作小品。

Answer 3

解决此问题的一种方法是使用ngIf表达式内的filter过滤器。

演示

HTML

<div ng-repeat="person in persons">
  {{ person.name }} in {{ person.place }} 
  <div>
    <span ng-if="houses.length > 0">has got the following houses:</span>
    <span ng-repeat="house in houses = (person.houses | filter: {value: true})">
      <span>{{ house.key }}/</span>
    </span>
  </div>
</div>

您可以在ng-repeat内分配一个独立的houses数组变量，该变量会被具有true value house过滤掉。 您可以使用houses数组长度作为显示标签的条件。 最后，您不需要检查每个房屋是否都有值，因为它已经过过滤。