angular: setting default selected items in dynamically generated options

Question

angular: setting default selected items in dynamically generated options

After looking at the example provided here, I noticed that all three select options have the same value. How can I ensure that each option has a different selected value?

This is what I currently have:

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

I want to have 5, 10, or 15 options and make sure that each displays a different selected value based on tarea.CLASIFICADORES. I tried setting it with:

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

But this sets all the options to the same value, as shown in the example. How can I dynamically set different selected values for each option based on the data from my ng-repeat loop?

The data is loaded via ajax...

My main issue is setting the default selected item based on tarea.CLASIFICADORES. For instance, if I have a to-do list with classifiers, I want the ng-options to automatically select the classifier value from my database when the page loads.

javascript angularjs html-select ng-options

Answer 1

Answer №1

One issue you may encounter is using the same scope variable for all selections. A possible solution is to store the selected options in an array as shown below:

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 instance, I utilize the $index variable provided by the ng-repeat directive. This allows accessing the current index of the repeat-loop.

UPDATE

The code snippet has been updated to set the default value for each select input.

Each item now includes a field with the corresponding class ID. The select input initialization is done using ng-init, setting selectedClass[$index] as the current item's selected value. As only the class ID is available in the item properties, a filter is used to find the matching class object based on the ID

(classes|filter:{id: currentItem.class})[0]

To avoid relying on the filter, assigning the full class object to each item instead of just the ID can be considered.

Answer 2

One issue you may encounter is using the same scope variable for all selections. A possible solution is to store the selected options in an array as shown below:

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 instance, I utilize the $index variable provided by the ng-repeat directive. This allows accessing the current index of the repeat-loop.

UPDATE

The code snippet has been updated to set the default value for each select input.

Each item now includes a field with the corresponding class ID. The select input initialization is done using ng-init, setting selectedClass[$index] as the current item's selected value. As only the class ID is available in the item properties, a filter is used to find the matching class object based on the ID

(classes|filter:{id: currentItem.class})[0]

To avoid relying on the filter, assigning the full class object to each item instead of just the ID can be considered.

angular: setting default selected items in dynamically generated options

Answer №1

Similar questions

Exploring the attributes of cycled values in Vue.js

What steps can be taken to verify if the user has transmitted a JSON Web Token?

What is the reason behind ASP MVC model binder's preference for JSON in POST requests?

Highlighting menu elements when landing on a page and making another menu element bold upon clicking in WordPress

User authentication on AngularJs is only initiated on the second interaction

Printing the elements of an array in a repetitive sequence

The "require" keyword cannot be used in a Node-RED Function node

Dynamic TextField sizing

Having trouble with IE7 - unable to interact with elements below popup form

What is the method for swapping out the <button> element with the enter key?

Instead of using an ID in javaScript, opt for $(this) instead

Is there a way to retrieve all "a" tags with an "href" attribute that contains the term "youtube"?

Click on the link or tab to update the marker location on the Google Map

Capturing an image of an HTML5 canvas that includes an image object: tips and tricks

The Blueimp File Uploader seems to be sending numerous submissions at once

Arrow function utilized in string rendered component

Invoke the onload event from document.ready using jQuery

One way to add a JSON object to an empty JSON array using Javascript involves pushing

tips for exporting database information to an excel file with the help of ajax request and javascript

AngularJS - Hiding Elements Dynamically Using `ng-hide` Based on an