现在我试图从select下拉列表获取值,但它返回undefined.事情在html级别,它按预期工作,这是我的代码：
<div class='subcontent'> <input id="me" type="radio" class='choosemethod' ng-model="paymentmethod" value="Y"><label for="me" class='choosemethod'>Me</label> <input id="company" type="radio" ng-model="paymentmethod" value="N" class='choosemethod'><label for="company" class='choosemethod'>My Company</label><br/> <span class='helptext'>Who makes payments to this account?</span><span class='help' style='margin-left:20px;width:20px;height:20px;'>help</span> </div> <div class='paymentmethods subcontent' ng-switch on="paymentmethod"> <select ng-model='selectedmethod' ng-init="selectedmethod=Memethods[0]" id='methods' ng-switch-when='Y'> <option ng-repeat="method in Memethods" value="{{method}}">{{method}}</option> </select> <select ng-model='selectedmethod' ng-init="selectedmethod=companies[0]" ng-switch-when='N' style='float:left'> <option ng-repeat='companyoption in companies' value="{{companyoption}}">{{companyoption}}</option> </select> <div class='clear'></div> <label for ='methods'>Payment Method</label><span class='help' style='margin-left:20px;width:20px;height:20px;'>help</span> </div>
在js中：
$scope.Memethods = ['Same as Card/Account Name','American Express','American Express Corp','Cash','Checking','MasterCard','My Visa','VISA']; $scope.companies = ['Company Paid','MyAMEX'];
它在页面中显示正常,但是当我尝试获取值时,它显示未定义.任何的想法？
@H_403_9@@H_403_9@
这是经典的“角点符号”问题.
基本上,ng-switch会创建一个新范围,因此当select设置selectedmethod属性时,它会在新范围内执行,而不是按照您的预期执行控制器范围.一种解决方案是为模型创建父对象.
angular.module('app',[])
.controller('main',function($scope){
$scope.selection = {};
$scope.Memethods = ['Same as Card/Account Name','VISA'];
$scope.companies = ['Company Paid','MyAMEX'];
})
并注意它在html中的引用方式有何不同：
<select ng-model='selection.selectedmethod' ng-init="selection.selectedmethod=companies[0]" ng-switch-when='N' style='float:left'>
<option ng-repeat='companyoption in companies' value="{{companyoption}}">{{companyoption}}</option>
</select>
一种不同的(可能更好的)方法是使用“ControllerAs”语法,它具有为您执行此操作的效果.
angular.module('app',[])
.controller('main',function($scope){
this.Memethods = ['Same as Card/Account Name','VISA'];
this.companies = ['Company Paid','MyAMEX'];
})
<body ng-app="app" ng-controller="main as main">
<div class='subcontent'>
<input id="me" type="radio" class='choosemethod' ng-model="paymentmethod" value="Y">
<label for="me" class='choosemethod'>Me</label>
<input id="company" type="radio" ng-model="paymentmethod" value="N" class='choosemethod'>
<label for="company" class='choosemethod'>My Company</label>
<br/>
<span class='helptext'>Who makes payments to this account?</span><span class='help' style='margin-left:20px;width:20px;height:20px;'>help</span>
</div>
<div class='paymentmethods subcontent' ng-switch on="paymentmethod">
<select ng-model='main.selectedmethod' ng-init="main.selectedmethod=main.Memethods[0]" id='methods' ng-switch-when='Y'>
<option ng-repeat="method in main.Memethods" value="{{method}}">{{method}}</option>
</select>
<select ng-model='main.selectedmethod' ng-init="main.selectedmethod=main.companies[0]" ng-switch-when='N' style='float:left'>
<option ng-repeat='companyoption in main.companies' value="{{companyoption}}">{{companyoption}}</option>
</select>
<div class='clear'></div>
<label for='methods'>Payment Method</label><span class='help' style='margin-left:20px;width:20px;height:20px;'>help</span>
</div>
<div>{{main.selectedmethod}}</div>
</body>
@H_403_9@