单击后，HTML下拉元素消失
[英]HTML dropdown element disappears after clicking
问题描述
我正在使用Angular的ng-init加载一个rest调用函数，它填充了$ scope.races然后填充了下拉列表。
初次加载时，一切似乎都很好。 但是，当我单击下拉菜单并选择一个选项时。 下拉列表立即变为空。
我假设$ scope.races变为空。
这是我的Angular控制器：
angular.module('MyApp', [])
.controller('RestController', function($scope, $http) {
$scope.getRaces = function() {
$http.get('http://localhost:8080/races').
success(function(data) {
$scope.races = data;
});
}
});
这是HTML：
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="restController.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body ng-app="MyApp" ng-controller="RestController">
<div class="container-fluid" ng-init="getRaces()">
<select ng-model="races">
<option ng-repeat="race in races" value="{{race.raceId}}">{{race.raceName}}</option>
</select>
</div>
</body>
</html>
2 个解决方案
解决方案1
2 2016-07-11 17:19:51
在中重新设置ng-model =“ races”时，将其删除。 这是工作示例。
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="restController.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body ng-app="MyApp" ng-controller="RestController">
<div class="container-fluid" ng-init="getRaces()">
<select>
<option ng-repeat="race in races" value="{{race.raceId}}">{{race.raceName}}</option>
</select>
</div>
<script>
angular.module('MyApp', [])
.controller('RestController', function($scope, $http) {
$scope.getRaces = function() {
var data = [{raceId:'1',raceName:'nam1'},{raceId:'12',raceName:'nam2'},{raceId:'13',raceName:'nam13'}];//get data from http
$scope.races = data;
// $http.get('http://localhost:8080/races').
// success(function(data) {
// $scope.races = data;
// });
}
});
</script>
</body>
</html>
解决方案2
1 已采纳 2016-07-11 17:15:51
您选择的问题是ng-model =“ races”，一旦选择一个选项，就会覆盖restController.js中的$ scope.races。 将ng-model =“ races”重命名为ng-model =“ racesSelection”，并将其用作变量来确定选择了哪个选项
Bootstrap下拉菜单在单击后消失
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.