Angularjs选择值未定义
发布时间:2020-12-17 10:34:22 所属栏目:安全 来源:网络整理
导读:现在我试图从select下拉列表获取值,但它返回undefined.事情在html级别,它按预期工作,这是我的代码: div class='subcontent' input id="me" type="radio" class='choosemethod' ng-model="paymentmethod" value="Y"label for="me" class='choosemethod'Me/la
现在我试图从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']; 它在页面中显示正常,但是当我尝试获取值时,它显示未定义.任何的想法?
这是经典的“角点符号”问题.
Here is a working example 基本上,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> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容
- 无法在dockerfile中执行gcloud init
- 如何将scala.collection.Set转换为RDD中可序列化的java.uti
- angularjs – 量角器找不到元素
- scala – 我的Play 2应用程序如何响应客户端的不同“Accept
- twitter-bootstrap – Twitter Bootstrap 3如何改变2.3.2版
- 设置默认的vim文件类型以进行语法突出显示
- 如何在Angular DART控制器之间进行通信
- IBM Message Broker笔记系列(七)
- Bootstrap 之 Metronic 模板的学习之路 - (7)GULP 前端自
- angularjs – 如何使用angular.element查找并迭代多个元素?