AngularJS与html标记的奇怪行为< select>

yzuktlbb 于 2022-10-31 发布在 Angular

关注(0)|答案(3)|浏览(169)

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

来源：https://stackoverflow.com/questions/49219324/angularjs-weird-behavior-with-html-select-tag

3条答案

按热度按时间

9rygscc11#

可以使用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相同的操作。
希望这能解决你的问题，也能提供信息。

赞(0）回复(0）举报 2022-10-31

pdtvr36n2#

这是因为你向框架提供了不连贯、矛盾的信息。select被绑定到optval，所以是optval的值告诉Angular必须选择哪个选项（你选择的属性是完全无用的，而且是矛盾的）。
1.你的意思是optval1的唯一可能值是"any"，"name"和"city"。
1.但是optval的值不是这些值中的任何一个。
所以AngularJS不得不做一些补偿，它增加了一个空白选项。

赞(0）回复(0）举报 2022-10-31

wqlqzqxt3#

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

请查找以下代码

赞(0）回复(0）举报 2022-10-31

我来回答

AngularJS与html标记的奇怪行为< select>

3条答案

相关问题

热门标签

最新问答