在angularjs中选择值时，html中的选择标签值消失

Question

I have a select tag in html which has a value from angularjs. Everytime I select a value, the select tag will be empty. Why? How to fix it?

$scope.getAll = function(){
     $http.post()....
     $scope.places = response.data;
};

$scope.getAll();

$scope.sample = function(str){
   alert(str);
};

HTML

<select ng-model="val" ng-change="sample(val)">
     <option ng-repeat="place in places" value="place.name">{{place.name}}</option>
</select>

In code above, when I select some value of the select tag it alerts me the value but the select tag goes empty!

Answer 1

When setting the value of the option as an expression, try using ng-value . While your question is confusing, I'm guessing that the alert shows up as place.name

<select ng-model="val" ng-change="sample(val)">
  <option ng-repeat="place in places" ng-value="place.name">{{place.name}}</option>
</select>

Or if you want to set the value of the select attribute itself, you can use,

<select ng-model="val" ng-change="sample(val)">
  <option ng-repeat="place in places" value="{{place.name}}">{{place.name}}</option>
</select>

https://plnkr.co/edit/fAbqV1wG2VuF069lt3bm?p=preview

This might be able to guide you further.

Answer 2

i recommend instead of using ng-repeat use ng-options

 angular.module("app",[]) .controller("ctrl",function($scope){ $scope.places = [ {name: 'California'}, {name: 'New York'}, {name: 'Cochin'} ]; }) 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="app" ng-controller="ctrl"> <select ng-model="val" ng-change="sample(val)" ng-options="place.name as place.name for place in places"> </select> {{val}} </div>