how to bind default value to select using ng-model

2020-04-14 06:45发布

站内问答 / 前端开发
1357 3 4 

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

When I add

$scope.machineSelected = "";

dynamically wherever in the controller, option in drop-down should set as "Select", but it is not updating.

3条回答
爷、活的狠高调
2楼-- · 2020-04-14 07:10

Use null or undefined, not an empty string, as the "not selected" value.

That's what the docs say:

Optionally, a single hard-coded <option> element, with the value set to an empty string, can be nested into the <select> element. This element will then represent the null or "not selected" option. See example below for demonstration.

It's not really clear that an empty string can't be used, but at least they mention null.

查看更多
0人赞 添加讨论(0) 举报
Melony?
3楼-- · 2020-04-14 07:16

Use null for the unselected value:

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

The ng-options directive was re-factored with AngularJS V1.6. Before then the default could be selected with an empty string. Now the default is selected by assigning null to the model.

For more infomation, see

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>

查看更多
0人赞 添加讨论(0) 举报
▲ chillily
4楼-- · 2020-04-14 07:17

Set default option in controller and dynamically change based on selected item

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

Controller 

app.controller('SelectedTextController', function ($scope) {
    $scope.selectedItem = "All Items";
    $scope.getSelectedText = function () {
        var selectedItem=this.selectedItem;
    };       
});
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)