AngularJS 选择列表有一个空白项答案

【问题标题】：AngularJS Select list has a blank itemAngularJS 选择列表有一个空白项
【发布时间】：2016-07-05 00:02:11
【问题描述】：

我的页面上有一些选择列表，其中一个运行良好，其余的在选项列表顶部有一个空白项。

这行得通

<td>
    <select data-ng-model="c.ResultOptionId" ng-change="checkResult(c)">
        <option value="" selected>--Select Option--</option>
        <option data-ng-repeat="opt in c.ResultOptions" value="{{opt.Value}}">{{opt.Text}}</option>
    </select>
</td>

这有一个额外的空白项

<td>
    <select data-ng-model="c.EquipmentId">
        <option value="" selected>--Select Equipment--</option>
        <option data-ng-repeat="eq in c.Equipment" value="{{eq.Value}}">{{eq.Text}}</option>
    </select>
</td>

为选择列表项生成的 HTML 是

<td>
    <select data-ng-model="c.EquipmentId" class="ng-pristine ng-valid ng-not-empty ng-touched">
        <option value="? number:0 ?"></option>
        <option value="" selected="">--Select Equipment--</option>
        <!-- ngRepeat: eq in c.Equipment -->
        <option data-ng-repeat="eq in c.Equipment" value="2" class="ng-binding ng-scope">EQ-001</option>
        <!-- end ngRepeat: eq in c.Equipment -->
    </select>
</td>

我是 AngularJs 的新手，但从我读过的内容来看，这应该可以。我检查了从我的 API 调用返回的数据，这是正确的，没有意外的项目。

感谢您的帮助

【问题讨论】：

那么你想避免什么？这一行<option value="? number:0 ?"></option>?
@developer033 我不想要那条线。我不确定是什么原因造成的，也不知道为什么会出现。
只是为了好玩，在“--选择设备--”选项上尝试 ng-selected="true" 而不是选中。
@developthewebz 我刚试过，但没有乐趣

标签： angularjs

【解决方案1】：

如果您使用 ng-repeat 生成选项，如文档所示，绑定值始终是字符串。

但存储在 ngModel (c.EquipmentId) 中的值是一个数字。所以你告诉 Angular：这是一个选项列表及其值，它们是字符串，请在字符串值中选择一个等于这个数字的值。由于字符串永远不会等于数字，因此 Angular 会生成一个附加选项。

因此，像往常一样，使用 ng-options 生成您的选项：

<select data-ng-model="c.EquipmentId"
        ng-options="eq.Value as eq.Text for eq in c.Equipment">
    <option value="">--Select Equipment--</option>
</select>

并确保c.EquipmentId 包含建议的设备值之一，或者为空或未定义。

【讨论】：

【解决方案2】：

这是一个 sn-p 工作：

var app = angular.module('app', []);

app.controller('mainCtrl', function ($scope) {
  $scope.equipments = [];
  for (var i = 0; i < 5; i++) {
    $scope.equipments.push(i);
  }
  // If you don't want any blank option => $scope.equip = $scope.equipments[0];
});

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

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>      
</head>

<body ng-controller="mainCtrl">
  <table>
    <thead>
      <tr>
        <td>Equipment</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <select data-ng-options="equip as equip for equip in equipments" data-ng-model="equip">
            <!-- you can coment this line below, if you don't want blank option -->
            <option value="">-- Select equipment--</option>
          </select>
        </td>
      </tr>
    </tbody>
  </table>
</body>

</html>

【讨论】：

【解决方案3】：

一般来说：（1）您应该将ng-options 用于选择中的选项，并且（2）空白或新选项意味着选择的当前模型值不会出现在选项列表中。

<td>
    <select data-ng-model="c.EquipmentId" data-ng-options="eq.Value as eq.Text for eq in c.Equipment">
        <option value="">--Select Equipment--</option>
    </select>
</td>

在 javascript 中，确保在控制器中初始化 c.EquipmentId。

c.EquipmentId = ""; // this will initialize the option to start at the `--Select Equipment--` option.  
c.EquipmentId = c.Equipment[0].Value; // this will initialize the option at the first Equipment value.
// for the issue that you stated, it looks like c.EquipmentId is either null or 0, so instead you can do something like this:
if (!c.EquipmentId) c.EquipmentId = "";

【讨论】：