The final entry in the labels section may not be checked, making $last unsuitable for this scenario. This results in the following sequence: peaches, bananas, cherries, watermelon,
How can I locate the last item in an angular ng-repeat loop while using an ng-if as a filter, and add a comma to all items except the last one that is checked within the list?
I possess an array of values that will be combined in my user interface. A mock sample array looks like this:
model.labels = {
value0: {
label: 'peaches',
checked: true
},
value1: {
label: 'apples',
checked: false
},
value2: {
label: 'bananas',
checked: true
},
value3: {
label: 'cherries',
checked: true
},
value4: {
label: 'watermelon',
checked: true
},
value5: {
label: 'plums',
checked: false
},
value6: {
label: 'mangos',
checked: false
}
}
Mainly, I desire to display what is currently visible in my UI with the only difference being that the last element in the labels section might not be checked, rendering $last ineffective:
<span ng-repeat="label in model.labels" ng-if="label.checked">
{{label.label}}{{$last ? '' : ', '}}
</span>I have contemplated implementing a custom filter, introducing a new data object to the model in the controller that includes a pre-combined string, as well as an HTML approach using a repeated span containing a hidden comma utilizing span:last-of-type. I want to understand if there exists a solution without resorting to any of these three methods.