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?
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>
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 .
One way to solve this problem is by using the the filter
filter inside the ngIf
expression.
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.