gpt4 book ai didi

javascript - HTML 下拉元素点击后消失

转载 作者:行者123 更新时间:2023-11-28 18:29:45 24 4
gpt4 key购买 nike

我正在使用 Angular 的 ng-init 加载休息调用函数,它填充 $scope.races 然后填充下拉列表。

第一次加载时一切似乎都很好。但是当我单击下拉菜单并选择一个选项时。下拉列表立即变空。

我假设 $scope.races 会变空。

这是我的 Angular Controller :

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>

最佳答案

删除 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>

关于javascript - HTML 下拉元素点击后消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38312458/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com