I am attempting to generate multiple checkboxes using ng-repeat from Array1, and I want to apply the "checked" attribute (using ng-checked) to specific checkboxes based on whether there is a match in Array2.
Here are the elements in array1 within the controller:
$scope.possibleConditions = ["condition1", "condition2", "condition3", "condition4"];
And array2 is retrieved from the same controller but through a JSON API.
{
"treated" : false,
"data" : [{
"conditions" : ["condition1", "condition2"],
}]
}
This is how I currently have my ng-repeat set up in the template:
<p ng-repeat="condition in possibleConditions">
<input type="checkbox" id="{{condition}}" />
<label for="{{condition}}">
{{condition}}
</label>
</p>
The goal is to include the checked attribute on the checkbox if a particular condition, such as "condition1" from Array1, is found in the "conditions" array of Array2.
What I have attempted so far:
1: I tried utilizing a filter (discovered on stackoverflow) after defining my controller:
.filter('customArray', function($filter){
return function(list, arrayFilter, element){
if(arrayFilter){
return $filter("filter")(list, function(listItem){
return arrayFilter.indexOf(listItem[element]) != -1;
});
}
};
I adjusted the ng-repeat slightly like this:
<p ng-repeat="conditions in possibleConditions | customArray:profileData.data:'conditions' ">
However, that approach did not work as expected.
2: Another attempt involved nesting another ng-repeat within the original one, then comparing against the first iteration for a match.
Sample snippet:
<p ng-repeat="conditions in possibleConditions">
<input ng-repeat="condition in profileData.data[0].conditions | filter{condition == conditions}" type="checkbox" id="{{condition}}" />
<label ng-repeat="condition in profileData.data[0].conditions | filter{condition == conditions}" for="{{condition}}">
{{condition}}
</label>
</p>
I am hopeful that someone can provide assistance or guidance. Thank you.