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選擇值未定義

回答

相關問題