Ng-Switch Breaks< select>默认值/ Ng-Init值 [英] Ng-Switch Breaks <select> Default/Ng-Init Value
问题描述
<！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 =Pageng-init =Page = 4>
< div ng-switch-when =4>
< option ng-value =0disabled =disabled> --- City ---< / option>
< option>城市1< / option>
< option>城市2< / option>
< / select>
< br>< br>
< option ng-value =0disabled =disabled> ---课程---< / 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>
我编辑了您的代码，如下所示。
几点需要注意的是： code> ng-init ，因为这不是一个好习惯，也不强烈建议。 ngInit的唯一适当的用法是用于别名ngRepeat的特殊属性。除此之外，您应该使用控制器而不是ngInit来初始化作用域上的值。 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.
I have edited your code as below. Few Points to be noted:
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
这篇关于Ng-Switch Breaks< select>默认值/ Ng-Init值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
ng-switch 会创建自己的子作用域。所以你的模型不是直接绑定到控制器上的。您可以绑定模型或使用控制器，如下所示。控制器作为语法隐式地处理DOT规则。有关更多信息，请参见 JavaScript Prototypal Inheritance
angular.module（ （'MyCtrl'，function（）{var vm = this; vm.cities = [{'name'：'City 1'，'value'：1}，{'name'：'MyApp'城市2'，'值'：2}]; vm.createSurburbArray = function（）{vm.suburbs = [{'name'：vm.City +'：Suburb 1'，'value'：1}，{'name '：vm.City +'：Suburb 2'，'value'：2}];} // init init（）{vm.Page = 4;}; init（）;}）;
<！DOCTYPE html>< html>< head>< / head>< body ng-app =MyAppng-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.Cityng-options =city.name as city.name for city in vm.citiesng-change =vm.createSurburbArray（）> < option value =disabled =disabled> --- City ---< / option> < /选择>在vm中为郊区提供suburb.name作为suburb.name的Subversion.name选择ng-model =vm.Suburbng-options =suburb.name as suburb.name for suburb in vm .suburbs> < option value =disabled =disabled> --- Course ---< / option> < /选择> < / DIV> < / div>< / body>< / html> <!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>
ng-init as it is not a good practice and is not highly recommended.
ng-switch creates 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>
