Il valore di selezione di Angularjs non è definito

Ora sto cercando di ottenere il valore dall'elenco a discesa di selezione, ma restituisce undefined. Il fatto è che nel livello di html funziona come si aspetta, Ecco il mio codice:Il valore di selezione di Angularjs non è definito

<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>

In js:

$scope.Memethods = ['Same as Card/Account Name','American Express','American Express Corp','Cash','Checking','MasterCard','My Visa','VISA']; 
$scope.companies = ['Company Paid','MyAMEX'];

si vede bene in pagina, ma quando provo ad ottenere il valore, mostra non definito. qualche idea?

fonte

2015-02-24 linyuanxie

Hai esaminato la possibilità di impostare le opzioni di selezione con la direttiva ng-options? Quindi non devi generare tu stesso i tag delle opzioni e ha anche altri vantaggi. Ho trovato che fosse più facile di quanto mi aspettassi una volta che l'ho provato. I documenti possono spiegarlo molto meglio di me: https://docs.angularjs.org/api/ng/directive/ngOptions –

Questo è il classico problema "angolare dot notation".

Here is a working example

In sostanza, ng-switch crea un nuovo ambito, in modo che quando i selezionare il set di proprietà selectedmethod, lo fa sul nuovo campo di applicazione, non nell'ambito del controllore, come vi aspettate. Una soluzione è creare un oggetto genitore per il tuo modello.

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

e notare come si fa riferimento in modo diverso nel codice 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>

A (forse meglio) diverso modo sarebbe quello di utilizzare la sintassi "ControllerAs", che ha l'effetto di fare questo per voi .

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>

fonte

2015-02-24 18:45:35

Questo è ciò di cui ho bisogno, ho pensato che potesse essere un problema di ambito, ma non potevo sapere dove e perché. Grazie uomo! – linyuanxie

Ben spiegato, anche se credo che il tuo esempio di codice per la sintassi del "controller come" non sia corretto al 100% - non hai bisogno di cambiare il resto dei riferimenti a 'Memethods' e' companies' come 'main.Memethods'/'main.companies'? Tutto ciò che è una proprietà dell'istanza del controller è disponibile solo nell'ambito dell'ambito tramite la proprietà scope, che in questo caso è "main". – GregL

Questo è quello che ottengo per mettere insieme una risposta su un ipad. Modificato. Grazie –

è possibile fare riferimento a questo semplice example

codice 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 codice:

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

fonte

2015-02-24 18:31:54 TechnoCrat

Il valore interno del modello ng deve avere Inizializza prima che rappresenti. Quindi il ng-init viene prima del modello-ng. all'interno delle opzioni $ first viene usato per selezionare il primo valore.

<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>

fonte

2015-12-12 19:06:32 Anbarasan

Il valore di selezione di Angularjs non è definito

risposta

Problemi correlati