default selected items dynamically in several options in angular

Question

i am seeing the example here https://docs.angularjs.org/api/ng/directive/select and this have 3 select with the same value, how can i have different values selected in my options?

i have this:

    <li ng-repeat="tarea in tareas">
      <input type="checkbox" ng-model="tarea.COMPLETADA" ng-change="updTarea(tarea.ID)"/>
      <span class="done-{{tarea.COMPLETADA}}" >{{tarea.NAME}} {{tarea.CLASIFICADORES}}</span>
      <select ng-model="selectedOpt" 
      ng-options="clasificador.NAME for clasificador in clasificadores">
      </select>
      <button class="buttons delete right" ng-click="delTarea(tarea.ID)"> Eliminar</button>
    </li>

so i can have 5,10,15 options, and i want to make a selected item with the value that i have in tarea.CLASIFICADORES, i tried with this

$scope.selectedOpt = $scope.clasificadores[1]

but that make all the options with the same value, like in the example...

how can i make different selected item in my options dynamically with a value i have in my ng-repeat in every item?

i load the data with ajax...

my problem is to set the default selected item with the tarea.CLASIFICADORES. for example, i have a todo list that have a classifier, i want my ng-options to select by default my database value clasifier when the page is load

Answer 1

The problem is, that you are using the same scope variable for all selections. You could store the selected options in an array too like this:

 function TestCtrl($scope) { $scope.items = [ { id: 1, class: 1 }, { id: 2, class: 2 }, { id: 3, class: 1 }, ]; $scope.classes = [ { name: "class 1", id: 1}, { name: "class 2", id: 2}, { name: "class 3", id: 3} ]; }; 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app> <div ng-controller="TestCtrl"> <div ng-repeat="currentItem in items"> <select ng-model="selectedClass[$index]" ng-init="selectedClass[$index]=(classes|filter:{id: currentItem.class})[0]" ng-options="class.name for class in classes track by class.id" > </select> selected class: {{selectedClass[$index]}} </div> </div> </div> 

In this example I take use of the variable $index, which is set by the ng-repeat directive. As the name suggests it contains the current index of the repeat-loop.

UPDATE

I updated the code-snippet so it sets the default value for each select input.

The different items now contain a field with the id of the corresponding class. I initialize the select input with ng-init . With this directive I set selectedClass[$index] which is the selected value for the current item. As we only have the class-id as a property of the items I use a filter to find the corresponding class object with the id (classes|filter:{id: currentItem.class})[0]

To get rid of the filter you could just set the class of each item to the full class-object instead of the id.