带有html <select>标记的<select>怪异行为
带有html <select>标记的<select>怪异行为
提问于 2018-03-11 11:11:23
我是一个新的AngularJS框架。我很少有关于在angularjs中使用<select>标记的问题。
首先，每当我在<select>标记中放置该选项的第一个值时，它就会在下拉列表中显示一个额外的空白选项。然后，当我选择下拉列表中的任何选项时，它就消失了。
第二，每当我将任何选项保持为空白时，它的行为就会正常。
为什么会发生这种事？
下面是代码：
<html>
<head>
<title>AngularJS Binding</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.js"></script>
</head>
<body ng-app="app">
<div>
Search 1: <select ng-model="optval1" >
<option value="any">Any</option>
<option value="name">Name</option>
<option value="city" selected>City</option>
</select>
<br>
Selected Value={{optval1}}<br><br>
Search 2: <select ng-model="optval2" >
<option value="">Any</option>
<option value="Name">Name</option>
<option value="City">City</option>
> </select>
<br>
Selected Value={{optval2}}
</div>
</body>
</html>回答 3
Stack Overflow用户
回答已采纳
发布于 2018-03-11 15:03:12
可以使用ng-init加载初始值。
<select ng-model="optval1" ng-init="optval1='any'">
<option value="any">Any</option>
<option value="name">Name</option>
<option value="city">City</option>
</select>如果您不想使用ng-init.来使用初始值
使用ng-show/ng-if。
<select ng-model="optval1">
<option value="" ng-if="false"></option>
<option value="any">Any</option>
<option value="name">Name</option>
<option value="city">City</option>
</select> 您还可以将样式元素硬编码到第一个下拉值。
前任：
<select ng-model="optval1">
<option style="display:none" value="">select</option>
<option value="any">Any</option>
<option value="name">Name</option>
<option value="city">City</option>
</select>做同样的事情，比如ng-if/ng-显示。
希望这解决了你的问题，也提供了信息。
Stack Overflow用户
发布于 2018-03-11 11:16:37
之所以会发生这种情况，是因为你向框架提供了不连贯、自相矛盾的信息。select被绑定到optval，所以optval的值告诉您必须选择哪些选项(您所选的属性完全无用，并且再次矛盾)。
- 您是说
optval1的唯一可能值是"any"、"name"和"city"。 - 但是
optval值不是这些值中的任何一个。
因此，AngularJS必须做一些补偿，它添加了一个空白选项。
Stack Overflow用户
发布于 2018-03-11 12:39:23
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div>
Search 1: <select ng-model="optval1">
<option value="any">Any</option>
<option value="name">Name</option>
<option value="city">City</option>
</select>
<br>
Selected Value={{optval1}}<br><br>
Search 2: <select ng-model="optval2" >
<option value="">Any</option>
<option value="Name">Name</option>
<option value="City">City</option>
> </select>
<br>
Selected Value={{optval2}}
</div>
</div>
</body>
</html>
<script>
var myApp = angular.module("myApp",[]);
myApp.controller('myCtrl', function($scope) {
$scope.optval1 = "city";
});
</script>
请查找以下代码
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49219324
复制相关文章
相似问题
腾讯云开发者
