Ng-Switch Breaks <select> Default/Ng-Init Value
Question
My problem is that the switch breaks the initial value of the select. It causes the select to show a blank initial option
*Note: I use more switch pages in my own program, I just deleted them here to simplify the problem. I also have to use switch, replacing it with routes is not an option.
<!DOCTYPE html>
<html>
<head>
</head>
<body ng-app>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
<div ng-switch="Page" ng-init="Page = 4">
<div ng-switch-when="4">
<select ng-model="City" ng-init="City=0" ng-change="Suburb=0">
<option ng-value="0" disabled="disabled">---City---</option>
<option>City 1</option>
<option>City 2</option>
</select>
<br><br>
<select ng-model="Suburb" ng-init="Suburb=0">
<option ng-value="0" disabled="disabled">---Course---</option>
<option ng-show="City == 'City 1'">City 1: Suburb 1</option>
<option ng-show="City == 'City 1'">City 1: Suburb 2</option>
<option ng-show="City == 'City 2'">City 2: Suburb 1</option>
<option ng-show="City == 'City 2'">City 2: Suburb 2</option>
</select>
</div>
</div>
</body>
</html>
2 answers
solution1
2 ACCPTED 2018-02-01 12:14:10
I have edited your code as below.
Few Points to be noted:
- Never use
ng-initas it is not a good practice and is not highly recommended.
The only appropriate use of ngInit is for aliasing special properties of ngRepeat. Besides this case, you should use controllers rather than ngInit to initialize values on a scope
- Your options where coming as blank because
ng-switchcreates its own child scope. So your models were not directly binded to the controller. You can bind your models or use controller as syntax as shown below. The controller as syntax implicitly takes care of the DOT Rule. See JavaScript Prototypal Inheritance for more reference.
angular.module("MyApp", []).controller("MyCtrl", function() { var vm = this; vm.cities = [{ 'name': 'City 1', 'value': 1 }, { 'name': 'City 2', 'value': 2 }]; vm.createSurburbArray = function() { vm.suburbs = [{ 'name': vm.City + ': Suburb 1', 'value': 1 }, { 'name': vm.City + ': Suburb 2', 'value': 2 }]; } //init function init() { vm.Page = 4; }; init(); });
<!DOCTYPE html> <html> <head> </head> <body ng-app="MyApp" ng-controller="MyCtrl as vm"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script> <div ng-switch="vm.Page"> <div ng-switch-when="4"> <select ng-model="vm.City" ng-options="city.name as city.name for city in vm.cities" ng-change="vm.createSurburbArray()"> <option value="" disabled="disabled">---City---</option> </select> <br><br>{{vm.City}}{{vm.Suburb}} <select ng-model="vm.Suburb" ng-options="suburb.name as suburb.name for suburb in vm.suburbs"> <option value="" disabled="disabled">---Course---</option> </select> </div> </div> </body> </html>
solution2
1 2018-02-01 12:56:10
VIVZ HAS THE BETTER ANSWER TO THIS THREAD
Here, however, is a more simple version of how to fix/understand the problem from the questioner's code.
1: change the "ng-value" to "value"
2: change the default-option and init values to "" (instead of "0")
<!DOCTYPE html>
<html>
<head>
</head>
<body ng-app>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
<div ng-switch="Page" ng-init="Page = 4">
<div ng-switch-when="4">
<select ng-model="City" ng-init="City=''" ng-change="Suburb=''">
<option value="" disabled="disabled">---City---</option>
<option>City 1</option>
<option>City 2</option>
</select>
<br><br>
<select ng-model="Suburb" ng-init="Suburb=''">
<option value="" disabled="disabled">---Course---</option>
<option ng-show="City == 'City 1'">City 1: Suburb 1</option>
<option ng-show="City == 'City 1'">City 1: Suburb 2</option>
<option ng-show="City == 'City 2'">City 2: Suburb 1</option>
<option ng-show="City == 'City 2'">City 2: Suburb 2</option>
</select>
{{City}}
</div>
</div>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.