Question

我正在研究AngularJS 1.0应用程序并面临Angular Select的问题。

只需复制虚拟代码：

<select ng-model ="data.state" ng-options="data.states">

选择

在这里，它列出了一个国家/地区的状态，并将默认数据作为ng-model传递。

如果默认值与数据源不匹配，我需要显示文本“选择”。

但它没有按预期工作，而是显示一个额外的空白空间而不是选择。

由于

Answer 1

＆＃34;我需要显示文字＆＃34;选择＆＃34;如果默认值与数据源不匹配。＆＃34;在这种情况下，您的data.state可能为空（即＆＃34;＆＃34;）。您可能期待这样的逻辑：

<label>States : </label>
  <select ng-model ="data.state" ng-options="data for data in data.states" >
    <option value="" selected hidden >SELECT</option> 
    <!--Removes the Empty space and shows "SELECT" as pre-populated by default in the drop-down. -->
  </select>
<br>Selected State : {{data.state}}

空白空间显示为Angular提供的占位符，用于保存"Select an option"或"Choose a best answer"等文字。您可以使用<option value="" selected hidden >Select</option>覆盖此选项，hidden不会出现在所选下拉选项列表中，因为它是<option value="" selected >SELECT</option>。

如果您希望将选项显示为一个选项供用户按顺序选择，如果该字段可以保持为空并且不是必需的，则可以使用以下代码：

 // $scope.data.state = something that is returned from some API response
 $scope.data = {
  states: [
    "Kerala",
    "Karnataka",
    "Andhra",
    "Haryana"
  ]
}

在控制器中期望数据为：

componentWillMount()

查看JS Fiddle here的工作样本。

Answer 2

<select ng-model ="data.state" ng-options="data.states">

在ng-repeat中使用track。跟踪$ index或id（如果有的话）

如何防止Angular1.0选择（下拉）额外的空格？

2 个答案: