AngularJS与html的怪异行为<；选择>；标签_Angularjs_Select_Angularjs Directive_Options

AngularJS与html的怪异行为<；选择>；标签

angularjs select

AngularJS与html的怪异行为<；选择>；标签,angularjs,select,angularjs-directive,options,Angularjs,Select,Angularjs Directive,Options,我是新的AngularJS框架。我对angularjs中标记的使用有一些疑问。首先，每当我将选项的第一个值放入标记时，它会在下拉列表中显示一个额外的空白选项。然后，当我在下拉列表中选择任何选项时，它就会消失。其次，每当我将任何选项保留为空时，它就会正常工作。为什么会这样？代码如下： <html> <head> <title>AngularJS Binding</title> <script src="https:

我是新的AngularJS框架。我对angularjs中

标记的使用有一些疑问。

首先，每当我将选项的第一个值放入

标记时，它会在下拉列表中显示一个额外的空白选项。然后，当我在下拉列表中选择任何选项时，它就会消失。

其次，每当我将任何选项保留为空时，它就会正常工作。

为什么会这样？

代码如下：

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


角结合
搜索1：
任何
名称
城市


所选值={optval1}}


搜索2：
任何
名称
城市
>          


所选值={optval2}}

之所以发生这种情况，是因为您向框架提供了不连贯、相互矛盾的信息。select绑定到

optval

，因此是

optval

的值告诉您必须选择哪些选项（您选择的属性完全没有用处，并且再次相互矛盾）

您是说，

optval1

的唯一可能值是

“any”

、

“name”

和

“city”

但是

optval

值不是这些值中的任何一个

因此AngularJS必须做一些补偿，它添加了一个空白选项


搜索1：
任何
名称
城市


所选值={optval1}}


搜索2：
任何
名称
城市
>          


所选值={optval2}}
var myApp=angular.module（“myApp”，[]）；
myApp.controller（'myCtrl'，函数（$scope）{
$scope.optval1=“城市”；
});

您可以使用

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>

也可以将样式元素硬编码为第一个下拉值

例如：

<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一样做同样的事情

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

ng init几乎不应该被使用。文件中明确规定了这一点。请不要鼓励使用它。控制器应该初始化变量。不是视图。在这种情况下，我们可以在控制器加载期间分配ng model=“optval1”的默认值

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