javascript - Angularjs 空选择器

Question

我目前有一个带有 ng-options 的 angularjs 选择，代码如下:

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

但是，当我选择任何选项时，所选的“窗口”仍然是空白的

问:如何才能使文本位于选择器内？以及如何删除空白选项？

编辑:

目前我使用 vm.selectedship 来获取所选船舶的全部属性。如果需要更改此处的任何内容，我需要以其他方式选择发送到 vm.property。

Answer 1

选择选项时看到空白的原因是您使用字符串作为别名而不是属性。所以 ng-model 无法找到要显示的属性。解决您的问题的方法是为 Controller 中的每个对象创建一个名为 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 + ")" });
});