在angularjs中选择值时,html中的选择标记值会消失

时间:2017-03-26 04:57:50

标签: javascript html angularjs

我在html中有一个select标签,它有一个来自angularjs的值。每次我选择一个值时,select标签都将为空。为什么?如何解决?

$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>

在上面的代码中,当我选择select标签的某个值时,它会提醒我值,但select标签变为空!

2 个答案:

答案 0 :(得分:2)

将选项的值设置为表达式时,请尝试使用ng-value。 虽然您的问题令人困惑,但我猜测警报显示为place.name

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

或者,如果您想设置select属性本身的值,可以使用

<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

这可能会为您提供更多指导。

答案 1 :(得分:2)

我建议您不要使用ng-repeat使用ng-options

&#13;
&#13;
angular.module("app",[])
.controller("ctrl",function($scope){

 $scope.places = [ {name: 'California'},
                          {name: 'New York'},
                          {name: 'Cochin'}
                        ];
})
&#13;
<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>
&#13;
&#13;
&#13;