Switching between ng-model in Angular

Question

I have an Angular JS code that generates a navigation list after requesting information from the database. I would like to be able to have the ng-model of the text field associated with the navigation be present after I click on a particular li element. For example, if I click on the second element of the list, I want ng-model of the text to bind to 'data.alt2'. If I click on the first element, I want the ng-model to bind to 'data.alt1'. I have tried messing around with JQuery ID to solve this problem, but I heard that there is a more elegant solution using Angular.

<ul class="nav nav-pills">
   <li role="presentation" class="active" ng-repeat="alts in alternatives" >
          <a > {{alts}}</a>
   </li>
</ul>

<div class="panel-body" >
     <textarea placeholder="Enter name of alternative"  ng-model="data.alt1">  </textarea>
</div>

thanks.

Answer 1

<li role="presentation" class="active" ng-repeat="alts in alternatives" >
<a ng-click="selected($index)"> {{alts}}</a>
</li>
<div class="panel-body" >
     <textarea placeholder="Enter name of alternative"  ng-model="data.alt{{clicked}}">  </textarea>
</div>

controller:

 $scope.selected = function(index) {
     $scope.clicked = (index);
     }

That should work. ng-click will pass in the index of the item clicked on to the selected function in the controller. The index number should be stored in the $scope.clicked variable, which is being reflected in ng-model.

Answer 2

You can bind the textarea to an array, or rather use the data object as an array:

<textarea placeholder="Enter name of alternative"  ng-model="data[indexClicked]">
</textarea>

if your data is sorted the same as your alts (alts[i] -> data[i]) , it should work perfectly.