CODEWITHSUNDEEP
htmlangularjsselectng-options
webta.st.ic
webta.st.ic

Reputation: 5169

Add dynamic id to option in ng-options

Is it possible to add a dynamic attribut id to an option, when I use ng-options in a select to loop my list and generate my dropdown? It works, if I use an ng-repeat loop, because there I can put the attribut id directly in the option tag an increment it with $index. Is this also possible with ng-options? Here is my code:

angular.module("myApp", []).controller("myController", function($scope) {
  $scope.selectedOption1;
  $scope.selectedOption2;

  $scope.myList = [{
    text: "1"
  }, {
    text: "2"
  }, {
    text: "3"
  }, {
    text: "4"
  }, {
    text: "5"
  }, ];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myController">
  <!--BUILD DROPDOWN WITH NG-OPTIONS LOOP-->
  <select ng-model="selectedOption" ng-options="option as option.text for option in myList"></select>

  <!--BUILD DROPDOWN AND SET ATTRIBUT ID WITH NG-REPEAT LOOP-->
  <select ng-model="selectedOption2">
    <option id="option_{{$index}}" ng-repeat="option in myList">{{option.text}}</option>
  </select>
</div>

Screenshot of both select (red border are the id's):

enter image description here

Any ideas? Thanks.

Upvotes: 2

Views: 2871

Answers (3)

user4676340
user4676340

Reputation:

You can use the track by option : 

<select ng-model="selectedOption" ng-options="obj.text for obj in myList track by obj.value">

But then, you have to modify your object a little bit : 

$scope.myList = [{
    text: "1",
    value: "option_1"
}, {
    text: "2",
    value: "option_2"
}, {
    text: "3",
    value: "option_3"
}, {
    text: "4",
    value: "option_4"
}, {
    text: "5",
    value: "option_5"
}, ];

This should do the trick.

EDIT The plunker to test it

EDIT 2 For those who want a fast answer, you also can do this : 

<select ng-model="selectedOption" ng-options="obj.text for obj in myList track by option + obj.text">

And in the js file add : 

$scope.option = 'option_';
$scope.myList = [{
    text: "1"
}, {
    text: "2"
}, {
    text: "3"
}, {
    text: "4"
}, {
    text: "5"
}, ];

Upvotes: 2

User
User

Reputation: 1363

angular.module("myApp", []).controller("myController", function($scope) {
  $scope.selectedOption1;
  $scope.selectedOption2;

  $scope.myList = [{
    text: "1"
  }, {
    text: "2"
  }, {
    text: "3"
  }, {
    text: "4"
  }, {
    text: "5"
  }, ];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myController">
    
<select ng-model="selectedOption2">
 <option ng-repeat="d in myList track by $index" ng-value="'Option_'+($index+1)">
   {{d.text}}
 </option>
  
</select>
  {{selectedOption2}}
</div>

Upvotes: 0

Aruna
Aruna

Reputation: 12022

Please have a look at the answer below.

Angular will always render the value as index starting from 0. Don't worry about this. Since it will have a internal reference and will update the modal accordingly.

I have placed a span below to see the value of the selected item.

angular.module("myApp", []).controller("myController", function($scope) {
  $scope.selectedOption1;
  $scope.selectedOption2;

  $scope.myList = [{
    text: "1"
  }, {
    text: "2"
  }, {
    text: "3"
  }, {
    text: "4"
  }, {
    text: "5"
  }, ];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myController">
  <!--BUILD DROPDOWN WITH NG-OPTIONS LOOP-->
  <select ng-model="selectedOption" ng-options="('option_' + (myList.indexOf(option) + 1)) as option.text for option in myList"></select>
  <br/><br/>
  Selected: <span><b>{{selectedOption}}</b></span>

</div>

Upvotes: 1

Related Questions