如何檢查數組中對象列表的至少一個值在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數組長度作為顯示標簽的條件。 最后，您不需要檢查每個房屋是否都有值，因為它已經過過濾。