2015-10-29 6 views
5

È qualcosa che non si dovrebbe fare? Poiché non riesco a farlo funzionare.Angolare - Imposta il modello ng utilizzando la variabile di ambito

Nel mio controller ho

$scope.test = "someValue" 

e, a mio avviso

<input ng-model="test" /> 

Quello che mi aspetto che si verifichi

<input ng-model="someValue" /> 

Tuttavia, ng-modello rimane come impostato su "test".

Come si risolve?

+0

Qual è l'attributo che si desidera impostare? o è che il valore del testo sia "someValue"? –

risposta

0

Mostra il codice del controller. Tuttavia, ho dimostrato di seguito che dovrebbe funzionare.

angular.module('myApp', []); 
 

 
angular.module('myApp').controller('myCtrl', function($scope) { 
 
    $scope.test = "somevalue"; 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<body ng-app="myApp"> 
 
    <form ng-controller="myCtrl"> 
 
    <input type="text" ng-model="test" /> 
 
    </form> 
 
</body>

ng-model rappresenta solo l'oggetto di associazione. Non cambierà. Ciò che cambia è value, che corrisponde al valore che assume l'oggetto ng-model.

2

Questo non è il modo in cui funziona ng-model. Se hai una variabile scope, come nel tuo caso test e il valore di questa variabile si rifletterà nella proprietà value del tuo input. Ciò significa che someValue sarà visibile nello input. In altre parole: ng-model è una direttiva che si associa a, ad es. un input, selezionare, textarea (o controllo di modulo personalizzato) a una proprietà sull'ambito utilizzando lo NgModelController.

NgModelController fornisce API per la direttiva ngModel. Il controller contiene servizi per i data-binding, la convalida, CSS aggiornamenti, e la formattazione del valore e l'analisi

Ecco un esempio:

var app = angular.module('myApp', []); 
 

 
app.controller('TestController', TestController); 
 

 
function TestController() { 
 
    var vm = this; 
 

 
    vm.myModel = "This is the model value"; 
 
    vm.selectedOption = undefined; 
 

 
    vm.options = [{ 
 
    id: '1', 
 
    name: 'Option A' 
 
    }, { 
 
    id: '2', 
 
    name: 'Option B' 
 
    }, { 
 
    id: '3', 
 
    name: 'Option C' 
 
    }]; 
 
};
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script> 
 

 
<body ng-app="myApp" ng-controller="TestController as vm"> 
 
    <input type="text" ng-model="vm.myModel" /> 
 

 
    <select name="mySelect" id="mySelect" ng-model="vm.selectedOption"> 
 
    <option ng-repeat="option in vm.options" value="{{option.id}}">{{ option.name }}</option> 
 
    </select> 
 
    
 
    <pre ng-if="vm.selectedOption">Selected Option: {{ vm.selectedOption }}</pre> 
 
</body>

L'esempio di cui sopra anche spettacoli alcune buone pratiche, significa utilizzare la sintassi controllerAs per la visualizzazione e una chiara dichiarazione della firma del controller.

+0

Grazie, sono sempre alla ricerca di suggerimenti per le migliori pratiche. Posso farlo funzionare per un semplice input nella mia vista ma non per quello che voglio. Penso che il problema che sto avendo è che sto cercando di impostare il modello ng di un '. – LordTribual