Question

我想在angular（1.0）中创建一个具有值的默认选项的选择列表。我不明白为什么，但是当我为默认选项添加一个值时，它没有正确显示。我的代码是这样的：

<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
  <script data-require="jquery@*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <script data-require="bootstrap@*" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script data-require="angular.js@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-controller="myController">
  <h1>States in India</h1>
  <select ng-options="state for state in states" ng-model="selectedState">
    <option value="">-- choose --</option>
  </select>

  <br/>
  <br/>
  <h1>States in India - not working proper (default option not displayed)</h1>
  <select ng-options="state for state in states" ng-model="selectedState">
    <option value="not_empty">-- choose --</option>
  </select>
</body>

</html>

有人可以帮我理解这种行为吗？为什么当我将value属性添加到默认选项时，它不再添加到选择？

稍后编辑：我想澄清的问题不是关于模型，而是关于非空值的选项元素：

<option value="not_empty">-- choose --</option>

我不明白为什么不提供此选项！如果我添加

<option value="">-- choose --</option>

然后它出现在下拉元素中（被渲染）！ Plunker：http://plnkr.co/edit/YDGodWKRqMROXjgEGXd2?p=preview

Answer 1

如果您选择使用ng-options，则无法使用html添加默认选项，您需要将ngModel绑定到以下选项之一：

<select ng-options="state.name for state in states" ng-model="selected">
</select>

This is a working example

如果您想要一条消息说“选择状态”，您应该在选项标签上使用ng-repeat：

<select ng-model="$ctrl.otherSelect">
  <option value="someValue">Select State</option>
  <option ng-repeat="state in states" value="state">{{state}}</option> 
</select>

angularjs选择值的选项

1 个答案: