CODEWITHSUNDEEP
javascriptangularjsselect
Anon
Anon

Reputation: 548

Select does not keep the value chosen by user

I'm new on Angular, and i'm pretty stuck on a simple select problem.

i did a simple select which iterate my scope to populate the select, but after a user click on an option (which are well created), my select becomes blank with no selection inside, and if i click it again there are no options visible.

below is my code:

var app = angular.module("myApp", []);

app.controller("myCtrl", function($scope) {
$scope.searchFilterDispatcher = {};
$scope.searchFilterDispatcher.distributionCode = [{
  id: 1,
  label: 'dist1'
}, {
  id: 2,
  label: 'dist2'
}];


});
<script 
 
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
</script>

<select ng-model="searchFilterDispatcher.distributionCode" 
        ng-options="item as (item.label | uppercase) for item in 
 searchFilterDispatcher.distributionCode"  
        class="form-control" 
        id="distributionCode">
	<option >{{'SELECT_A_VALUE' | translate}}</option>
</select>

Any hint?

Upvotes: 0

Views: 59

Answers (1)

hasan
hasan

Reputation: 3502

You should change your ng-model like following. It works in snippet

var app = angular.module("myApp", []);

app.controller("myCtrl", function($scope) {
    $scope.searchFilterDispatcher = {};
    $scope.searchFilterDispatcher.distributionCode = [{
      id: 1,
      label: 'dist1'
    }, {
      id: 2,
      label: 'dist2'
    }];
    
    
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="val" ng-options="item as (item.label | uppercase) for item in searchFilterDispatcher.distributionCode" class="form-control" id="distributionCode">
</select>
</div>

Upvotes: 1

Related Questions