Question

<select ng-model="machineSelected"
        ng-options="machine._id as machine.name for machine in machineList"
        ng-change="onChangeMachine(machineSelected)"
        ng-disabled="!mineSelected">
    <!--<option value=""></option>-->
    <option value="">Select</option>
</select>

当我添加

$scope.machineSelected = "";

动态地在控制器中的任何地方，下拉菜单中的选项应设置为“选择”，但不会更新。

Answer 1

使用null或undefined（而不是空字符串）作为“未选中”值。

docs就是这样：

（可选）可以将单个硬编码的<option>元素（其值设置为空字符串）嵌套在<select>元素中。然后，此元素将表示null或“未选中”选项。请参见下面的示例进行演示。

尚不清楚不能使用空字符串，但至少他们提到了null。

Answer 2

在控制器中设置默认选项，并根据所选项目动态更改

 <select ng-model="selectedItem"  ng-change="getSelectedText()">
    <option >All Items</option>
    <option >Active Subscriptions Only</option>
    <option >Expired Only</option>
 </select>

控制器

app.controller('SelectedTextController', function ($scope) {
    $scope.selectedItem = "All Items";
    $scope.getSelectedText = function () {
        var selectedItem=this.selectedItem;
    };       
});

Answer 3

使用null作为未选择的值：

̶$̶s̶c̶o̶p̶e̶.̶m̶a̶c̶h̶i̶n̶e̶S̶e̶l̶e̶c̶t̶e̶d̶ ̶=̶ ̶"̶"̶;̶
$scope.machineSelected = null;

ng-options指令已使用AngularJS V1.6进行了重构。在此之前，可以使用空字符串选择默认值。现在，通过为模型分配null来选择默认值。

有关更多信息，请参见

The DEMO

angular.module("app",[])
.controller("ctrl",function($scope){
  $scope.machineList = [
    { _id:1, name: "Megatron" },
    { _id:2, name: "Starscream" },
    { _id:3, name: "Shockwave" },
  ];
  $scope.machineSelected = null;
})

<script src="//unpkg.com/angular/angular.js"></script> 
<body ng-app="app" ng-controller="ctrl">
    <select ng-model="machineSelected"
        ng-options="machine._id as machine.name for machine in machineList"
        ng-change="onChangeMachine(machineSelected)">
       <option value="">Select</option>
    </select>
    <br>
    machineSelected={{machineSelected}}
</body>

如何使用AngularJS V1.6使用ng-model绑定默认值以进行选择

3 个答案:

The DEMO