Angularjs选择值未定义

现在我试图从select下拉菜单中获取值，但它返回undefined。事情是在HTML水平它的工作原理期待，这是我的代码：Angularjs选择值未定义

<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'];

它显示在页面上，但是当我尝试获取的价值，它显示未定义。任何想法？

来源

2015-02-24 linyuanxie

您是否研究过使用ng-options指令设置选择选项？那么你不必自己生成选项标签，而且它还有其他优点。一旦我尝试了它，我发现它比我预期的更容易。该文档可以解释它比我更好：https：//docs.angularjs.org/api/ng/directive/ngOptions – 2015-02-24 18:16:53

这是典型的 “角点表示法” 的问题。

Here is a working example

基本上，NG-开关创建一个新的范围，所以当选择套selectedmethod属性，它是这样做的新范围，而不是控制范围，因为你期望。一种解决方案是为您的模型创建一个父对象。

angular.module('app',[]) 
.controller('main', function($scope){ 
    $scope.selection = {}; 
    $scope.Memethods = ['Same as Card/Account Name','American Express','American Express Corp','Cash','Checking','MasterCard','My Visa','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','American Express','American Express Corp','Cash','Checking','MasterCard','My Visa','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>

来源

2015-02-24 18:45:35

这是我需要的，我认为这可能是范围问题，但无法知道在哪里和为什么。谢啦！ – linyuanxie 2015-02-24 19:12:05

很好解释，虽然我相信你的“控制器为”语法的代码示例不是100％正确的 - 你不需要改变“Memethods”和“companies”的引用的其余部分为“main.Memethods” /'main.companies'？任何属于控制器实例的属性都只能通过范围属性（在本例中为“main”）在范围中使用。 – GregL 2015-02-25 06:54:57

这就是我在ipad上得到答案的结果。编辑。谢谢 – 2015-02-25 07:02:04

你可以参考这个简单的example

的html代码：

<div ng-controller="Main" ng-app> 
    <div>selections = {{selections}}</div> 

    <div> 
     <p>Model doesn't get updated when selecting:</p> 
     <select ng-repeat="selection in selections" ng-model="selection" ng-options="i.id as i.name for i in items"> 
     <option value=""></option> 
     </select> 
    </div>

JS代码：

function Main($scope) { 

    $scope.selections = ["", "id-2", ""]; 

    $scope.reset = function() { 
     $scope.selections = ["", "", ""]; 
    }; 

    $scope.sample = function() { 
     $scope.selections = [ "id-1", "id-2", "id-3" ]; 
    } 

    $scope.items = [{ 
     id: 'id-1', 
     name: 'Name 1'}, 
    { 
     id: 'id-2', 
     name: 'Name 2'}, 
    { 
     id: 'id-3', 
     name: 'Name 3'}]; 
}

来源

2015-02-24 18:31:54 TechnoCrat

ng-model内部值在它表示之前必须具有Initialize。所以ng-init在ng模型之前。选项$ first中用于选择第一个值。

<select ng-init= "selectedmethod=companies[0]" ng-model='selectedmethod' ng-switch-when='N' style='float:left'> 
    <option ng-repeat='companyoption in companies' value="{{companyoption}}" ng-selected="$first">{{companyoption}} 
    </option> 
</select>

来源

2015-12-12 19:06:32 Anbarasan

Angularjs选择值未定义

回答

相关问题