AngularJS html <select> 标签的奇怪行为

Question

我是新 AngularJS 框架。我有几个关于在 angularjs 中使用 <select> 标签的问题。

首先，每当我将选项的第一个值放在 <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>

Answer 1

发生这种情况是因为您向框架提供了不连贯、矛盾的信息。 select 绑定到 optval，因此 optval 的值告诉 Angular 必须 select 编辑哪个选项（您的 selected 属性完全没用，而且又自相矛盾）。

您是说 optval1 的唯一可能值是 "any"、"name" 和 "city"。
但是 optval 值不是这些值中的任何一个。

所以AngularJS不得不做一些补偿，它增加了一个空白选项。

Answer 2

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

请查找以下代码

Answer 3

可以使用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>

您还可以 hard-coded 将样式元素设置为第一个下拉值。

例如：

<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-show 相同的事情。

希望这能解决您的问题并提供信息。

AngularJS html <select> 标签的奇怪行为

AngularJS weird behavior with html <select> tag

select

options

angularjs

angularjs-directive