CODEWITHSUNDEEP
javascriptangularjsangularjs-scopedom-events
Syed Rasheed
Syed Rasheed

Reputation: 559

Select by default value for dropdown not working by using 'track by' in angualrjs

I am using track by to avoid strange values ::string that are appending to value but when I select by default dropdown, dropdown is not getting selected.. this is my plunker

Example Plunker

Upvotes: 0

Views: 125

Answers (2)

LGLab
LGLab

Reputation: 56

This will work:

<select name="mySelect" id="mySelect" ng-options="option.name for option in data.availableOptions track by option.id" ng-model="data.selectedOption"></select>

$scope.data = { availableOptions: [ {id: 1, name: 'Option A'}, {id: 2, name: 'Option B'}, {id: 3, name: 'Option C'} ], selectedOption: {id: 2, name: 'Option B'} };

http://plnkr.co/edit/yOPa3hb2nSgkpOfu8NbT?p=preview

Upvotes: 1

J-Mean
J-Mean

Reputation: 1200

(function(angular) {
  'use strict';
angular.module('defaultValueSelect', [])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.data = {
     availableOptions: [
       {id: '1', name: 'Option A'},
       {id: '2', name: 'Option B'},
       {id: '3', name: 'Option C'}
     ],
     selectedOption: '2' //This sets the default value of the select in the ui
     };
 }]);
})(window.angular);
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-select-with-default-values-production</title>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
  <script src="script.js"></script>
</head>
<body ng-app="defaultValueSelect">
  <div ng-controller="ExampleController">
  <form name="myForm">
    <label for="mySelect">Make a choice:</label>
   
      
    <select ng-model="data.selectedOption"> 
       <option ng-repeat="option in data.availableOptions track by option.id" value="{{option.id}}">{{ option.name}}</option> 
    </select>
  </form>
  <hr>
  <tt>option = {{data.selectedOption}}</tt><br/>
</div>
</body>
</html>

Working snippet of your demo

Please change your <select> tag as follows

<select ng-model="data.selectedOption"> 
   <option ng-repeat="option in data.availableOptions track by option.id" value="{{option.id}}">{{ option.name}}</option> 
</select>

Upvotes: 1

Related Questions