how to bind default value to select using ng-model using AngularJS V1.6
![[愿得一人]](https://www.e-learn.cn/qa/data/avatar/000/00/00/small_000000012.jpg)
-
Use
nullfor 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-optionsdirective was re-factored with AngularJS V1.6. Before then the default could be selected with an empty string. Now the default is selected by assigningnullto the model.For more infomation, see
- AngularJS API Reference - Using select with ngOptions and setting a default value
- AngularJS ng-options Directive API Reference
- AngularJS Developer Guide - Migrating to V1.6 - select directve
- ng-options is hiding the blank value with AngularJS V1.5
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) -
Use
nullorundefined, 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 thenullor "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) -
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)
加载中...
- 热议问题