1

I have an array like $scope.years = ['1900', '1901', '1902'];

If I use <select ng-model="chosenYear" ng-options="choice for choice in years"></select> I get 

<option value="0">1900</option>
<option value="1">1901</option>
<option value="2">1902</option>

where index of the array becomes the 'value' of options. How can I have both value and label equal (both being 1900, 1902, 1902, etc) ?

A similar question has an accepted answer, but it doesn't do this thing at all.

Angular version : 1.2.16

Community
  • 1
  • 1
Daud
  • 7,429
  • 18
  • 68
  • 115
  • 1
    look at [this](http://stackoverflow.com/questions/14552976/how-to-get-option-text-value-using-angularjs), is similar with your case – GomuGomuNoRocket Oct 20 '16 at 10:31
  • Just a quick question, given that you have a model (`chosenYear`) which is the selected item and you have a list of selectable items, why do you need to do this? – Corporalis Oct 20 '16 at 10:37

4 Answers4

4

What you want is <select ng-model="chosenYear" ng-options="choice as choice for choice in years"></select>

EDIT: since above does not work in angular 1.2.16 try below

<select ng-model="chosenYear" ng-options="choice for choice in years track by choice"></select>


var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.years = ['1900', '1901', '1902'];
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">


<select ng-model="chosenYear" ng-options="choice for choice in years track by choice"></select>
</div>



</body>
</html>
Sajan
  • 1,893
  • 2
  • 19
  • 39
  • yes, just checked. It is not working with your version, though working perfectly with `V 1.5.8`. I am not sure if `1.2.16` has support for this feature. – Sajan Oct 20 '16 at 10:53
  • @Daud I have edited my answer and added a snippet for new code. Can you try this ? – Sajan Oct 20 '16 at 11:03
  • I am not sure, since it works in this bare bone snippet I guess its due to some other part of your code. – Sajan Oct 20 '16 at 11:08
  • Yes, it was my issue. Working now. – Daud Oct 20 '16 at 11:24
1

look at this, is similar with your case or you can just use ng-repeat and create value dynamically<option ng-repeat="option in selecteOptions" value="option">{{option}}</option>

Community
  • 1
  • 1
GomuGomuNoRocket
  • 771
  • 2
  • 11
  • 37
1

Try this 

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.years = [{
      label: "1900",
      value: "1900"
    }, {
      label: "1901",
      value: "1901"
    }, {
      label: "1902",
      value: "1902"
    },

  ];
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body>

  <div ng-app="myApp" ng-controller="myCtrl">

    <p>Select a year:</p>

   

    <select  name="mySelect" id="mySelect" ng-options="option.label for option in years track by option.value" ng-model="selectedCar"></select>

    <h1>You selected: {{selectedCar.label}}</h1>

  </div>



</body>

</html>
Jigar7521
  • 1,549
  • 14
  • 27
0

If you don't mind using ng-repeat, use this instead:

<select ng-model="selectedItem"> <option ng-repeat="year in years" value="{{year}}">{{year}}</option> </select>

sisyphus
  • 452
  • 5
  • 13