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

Question

In my website I've got an array which also contains another array with some values:

[
    {
        "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
            }
        ]
    }
]

I loop over the two objects fine, but I only want to loop over the houses if at least one of the value s of houses is true. So for Pete I want to loop over the houses, but not for William. I currently have this code:

<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>

but I have no clue what to put in the ng-if to check whether any of the value s is true. Does anybody know how I should tackle this?

Answer 1

Assign flag to parent object, simple implementation would be like this

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;
    });
});

then in your view

<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

The best way to solve this problem is to filter the array of persons in your controller:

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;
}

which will greatly simplify your view because the controller already provides you with the filtered data:

<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>

I have created a working plunk for you here .

Answer 3

One way to solve this problem is by using the the filter filter inside the ngIf expression.

DEMO

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>

You can assign an isolated houses array variable inside the ng-repeat which is filtered with houses that has a true value . You can use the houses array length as a condition to show the label. Lastly, you don't need to check whether each house a value since it has already been filtered.