Question

我的页面上有一些选择列表，其中一个工作正常，其余部分在选项列表的顶部有一个空白项目。

这有效

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

感谢您的帮助

Answer 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包含一个建议的设备值，或者为null或未定义。

Answer 2

这是一个代码片段：

if (rotZ > 40 || rotZ < -40) {
    rend.flipY = true;
    firePoint.position = new Vector3(firePoint.position.x, firePoint.position.y * -1, firePoint.position.z);
} else {
    rend.flipY = false;
    firePoint.position = new Vector3(firePoint.position.x, firePoint.position.y * -1, firePoint.position.z);
}

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];
});

Answer 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 = "";

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

3 个答案: