javascriptangularjshtml-selectng-options

default selected items dynamically in several options in angular


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


Solution

  • 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.