javascript - 如何防止Angular1.0选择(下拉)多余的空格？

Question

我正在开发 AngularJS 1.0 应用程序，并面临 Angular Select 的问题。

只需复制虚拟代码:

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

选择

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

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

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

谢谢

Answer 1

“如果默认值与数据源不匹配，我需要显示文本“选择”。”在这种情况下，您的 data.state可能为空(即“”)情况。您可能期待这样的逻辑:

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

在 Controller 中期望数据为:

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

查看 JS Fiddle here用于工作样本。