I am currently working on a solution to toggle dynamically generated rows of data. I have attempted using ng-init and passing it to a function, but I seem to be making a mistake somewhere and struggling to understand if this is even feasible. The issue seems to lie in referencing the concatenated scope variable elsewhere. My setup involves Bootstrap 3 and AngularJS 1.5.
The HTML:
<div class="row" data-ng-repeat="equipment in task.equipment">
<div class="col-md-12">
<h4 class="green-text">
{{ equipment.equipId }}
<small class="green-text">
<i class="glyphicon"
data-ng-class="{'glyphicon-triangle-bottom': field{{ $index }}, 'glyphicon-triangle-right': !field{{ $index }}}"
data-ng-init="equipment['field' + $index] = true"
data-ng-click="toggleTaskEquip('field{{ $index }}')">
field{{ $index }}: MAKING THIS WORK IS THE GOAL</i>
</small>
</h4>
</div>
<div data-ng-show="field{{ $index }}">
...contents here...
</div>
</div>
The JS:
$scope.toggleTaskEquip = function(toggleBool)
{
if (toggleBool === true)
$scope.isTaskEquipOpen = false;
else if (toggleBool === false)
$scope.isTaskEquipOpen = true;
};