Question

我的Angularjs应用中有一个选择/下拉框：

<select ng-model="places">
  <option value="1">London</option>
  <option value="2">Paris</option>
  <option value="3">Madrid</option>
  <option value="4">Athens</option>
</select>

但在HTML页面中，伦敦选项上方添加了一个额外的空白option。当我删除ng-model时，它会按照我的预期呈现（即默认显示伦敦的4个选项）。这是正常的吗？

Answer 1

如果ng-model的值，即 places 与选项值不匹配，则生成此额外空白选项并默认选中。您需要将ng-model值设置为等于其中一个选项，或者如果您不希望在默认情况下选择任何值，请创建另一个值为空白的选项

 <option value="">Select</option>

并将ng-model设置为地点到＆＃34;＆＃34;在控制器中。

Answer 2

在您的情况下，您可以尝试：

 var app = angular.module("Demo", []);
 app.controller("AppController", function($scope) {
   
 });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="Demo">
  <div ng-controller="AppController">
    <select ng-model="places" ng-init="places=1">
      <option value="1">London</option>
      <option value="2">Paris</option>
      <option value="3">Madrid</option>
      <option value="4">Athens</option>
    </select>
  </div>
</div>

希望这会对你有所帮助。感谢。

在Angular中选择框添加额外的空白选项

2 个答案: