Angularjs空selectselect或

Question

我目前有一个 angularjs select 和 ng-options，代码如下：

 <select ng-model="vm.selectedship" ng-change="vm.updateShip()"  data-ng-options="ship as ('ship'  + ' is ready (' + ship.currentlocation + ')') for ship in vm.readyships">

生成此生产代码：

    <select class="ng-valid ng-dirty ng-touched" data-ng-options="ship as ('ship' + ' is ready (' + ship.currentlocation + ')') for ship in vm.readyships">
<option label="" selected="selected" value="?">
        </option>
    <option label="ship is ready (New york)" value="0">
        ship is ready (New york)
    </option>
    <option label="ship is ready (City2)" value="1">
        ship is ready (City2)
    </option>
    <option label="ship is ready (City3)" value="2">
        ship is ready (City3)
    </option>
    <option label="ship is ready (City24)" value="3">
        ship is ready (City24)
    </option>
    <option label="ship is ready (City24)" value="4">
        ship is ready (City24)
    </option>
</select>

但是，当我 select 使用任何选项时，selected "window" 仍然像这样空白

问：如何才能让文字在selector之内？如何去掉空白选项？

编辑：

目前我正在使用 vm.selectedship 来获得 selected 飞船的整个属性。如果这里有什么需要改变的，我需要 select 以其他方式运送到 vm.property。

Answer 1

您在选择选项时看到空白的原因是您使用的是字符串作为别名，而不是属性。所以 ng-model 无法找到要显示的属性。您的问题的解决方案不是即时创建要显示的字符串，而是为控制器中的每个对象创建一个名为 DisplayText 的属性。

html

 <select ng-model="vm.selectedship" ng-change="vm.updateShip()"  
data-ng-options="ship as ship.DisplayText 
for ship in vm.readyships">

js

 _.each(vm.readyships, function (ship) { 
_.extend(ship, { DisplayText: "ship is ready (" + ship.currentlocation + ")" });
});

Angularjs空selectselect或

Angularjs empty select selector

javascript

angularjs

ng-options

angularjs-ng-options