带有 html <select> 标签的 AngularJS 奇怪行为答案

【问题标题】：AngularJS weird behavior with html <select> tag带有 html <select> 标签的 AngularJS 奇怪行为
【发布时间】：2018-08-19 12:49:20
【问题描述】：

我是新的 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>

【问题讨论】：

标签： angularjs select angularjs-directive options

【解决方案1】：

您可以使用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-show 做同样的事情。

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

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

请在下面找到代码

【讨论】：

ng-init 几乎不应该被使用。这在文档中有明确规定。请不要鼓励使用它。控制器应该初始化变量。不是风景。
在这种情况下，我们可以在控制器加载期间分配 ng-model="optval1" 的默认值