My ng-repeat-generated list of inputs starts with only the first one enabled and styled with an active class (highlighted in red). You can see it in action on this example.
Whenever I focus on an input, the next one becomes enabled and also receives the active styling. This applies to all inputs dynamically.
My goal is to have a placeholder text visible only on inputs with the active class. Inputs without the active class should not have any placeholder text.
How can I achieve adding a placeholder dynamically to inputs with the active class?
Here's the relevant code snippet:
<div class="col-md-2-4 voffset3" ng-repeat="item in csTagGrp">
<ul class="list-unstyled cs-tag-item-grp" ng-init="$parentIndex = $index">
<li class="clearfix" ng-repeat="value in item.csTags">
<div class="pull-left cs-tag-item-list">
<input ng-focus="focusItem($index, $parentIndex)" ng-disabled="!value.active" ng-class='{active: value.active && !value.old}' type="text" class="form-control input-sm">
</div>
</li>
</ul>
</div>
Appreciate any help in advance.