AngularJS的选择列表有一个空白项

我的页面上有几个选择列表，其中一个工作得很好，其余的在选项列表的顶部有一个空白项。

这是

<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调用返回的数据，这是正确的，没有意外的项目。

感谢您的帮助

如果使用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包含建议的设备值之一，或为空或未定义。

下面是一个正常工作的代码片段:

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>

一般来说:(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 = "";

相关内容

最新更新

热门标签：