Supponi di avere un modulo con valori caricati dal database. Come si inizializza ng-model?
Esempio:
<input name="card[description]" ng-model="card.description" value="Visa-4242">Nel mio controller, $ scope.card inizialmente non è definito. C'è un modo oltre a fare qualcosa del genere?
$scope.card = {
description: $('myinput').val()
}Risposte:
Questo è un errore comune nelle nuove applicazioni angolari. Non vuoi scrivere i tuoi valori nel tuo HTML sul server se puoi evitarlo. In effetti, se riesci ad evitare che il tuo server esegua il rendering HTML, tanto meglio.
Idealmente, si desidera inviare i modelli HTML angolari, quindi ridurre i valori tramite $ http in JSON e inserirli nel proprio ambito.
Quindi, se possibile, fai questo:
app.controller('MyController', function($scope, $http) {
$http.get('/getCardInfo.php', function(data) {
$scope.card = data;
});
});
<input type="text" ng-model="card.description" />Se DEVI assolutamente rendere i tuoi valori nel tuo HTML dal tuo server, potresti metterli in una variabile globale e accedervi con $ window:
Nell'intestazione della tua pagina scriveresti:
<head>
<script>
window.card = { description: 'foo' };
</script>
</head>E poi nel controller lo otterresti così:
app.controller('MyController', function($scope, $window) {
$scope.card = $window.card;
});Spero che aiuti.
Se non riesci a rielaborare la tua app per fare ciò che suggerisce @blesh (abbassa i dati JSON con $ http o $ risorse e popola $ scope), puoi invece usare ng-init :
<input name="card[description]" ng-model="card.description" ng-init="card.description='Visa-4242'">ng-initsia abbastanza utile quando si impostano valori da code-behind / postback ad es <input name="phone" data-ng-model="frm.phone" data-ng-init="frm.phone= '<%: Model.Phone %>'" data-ng-pattern="/^[0-9() \-+]+$/" type="tel" required />. Un po 'brutto? Sì, ma fa il trucco e risolve un mal di testa di integrazione nel processo.
Questa è ovviamente una soluzione carente, ma facilmente aggiunta per AngularJS. Basta scrivere una direttiva rapida per impostare il valore del modello dal campo di input.
<input name="card[description]" value="Visa-4242" ng-model="card.description" ng-initial>Ecco la mia versione:
var app = angular.module('forms', []);
app.directive('ngInitial', function() {
return {
restrict: 'A',
controller: [
'$scope', '$element', '$attrs', '$parse', function($scope, $element, $attrs, $parse) {
var getter, setter, val;
val = $attrs.ngInitial || $attrs.value;
getter = $parse($attrs.ngModel);
setter = getter.assign;
setter($scope, val);
}
]
};
});controllertua direttiva e perché non hai usato il linkmetodo? Sono un novizio di angularjs
val = $attrs.ngInitial || $attrs.value || $element.val()per farlo funzionare con elementi selezionati.
IMHO la soluzione migliore è la direttiva @Kevin Stone, ma ho dovuto aggiornarla per funzionare in tutte le condizioni (fe select, textarea), e questa funziona sicuramente:
angular.module('app').directive('ngInitial', function($parse) {
return {
restrict: "A",
compile: function($element, $attrs) {
var initialValue = $attrs.value || $element.val();
return {
pre: function($scope, $element, $attrs) {
$parse($attrs.ngModel).assign($scope, initialValue);
}
}
}
}
});Puoi usare una direttiva personalizzata (con supporto per textarea, selezionare, radio e checkbox), dai un'occhiata a questo post sul blog https://glaucocustodio.github.io/2014/10/20/init-ng-model-from-form- attributi-campi / .
Ho un approccio semplice, perché ho alcune convalide e maschere pesanti nelle mie forme. Quindi, ho usato jquery per ottenere di nuovo il mio valore e attivare l'evento "modifica" in convalide:
$('#myidelement').val('123');
$('#myidelement').trigger( "change");Come altri hanno sottolineato, non è buona norma inizializzare i dati sulle viste. Si consiglia, tuttavia, di inizializzare i dati sui controller. (vedi http://docs.angularjs.org/guide/controller )
Quindi puoi scrivere
<input name="card[description]" ng-model="card.description">e
$scope.card = { description: 'Visa-4242' };
$http.get('/getCardInfo.php', function(data) {
$scope.card = data;
});In questo modo le viste non contengono dati e il controller inizializza il valore mentre vengono caricati i valori reali.
Se ti piace l'approccio di Kevin Stone sopra https://stackoverflow.com/a/17823590/584761 considera un approccio più semplice scrivendo direttive per tag specifici come "input".
app.directive('input', function ($parse) {
return {
restrict: 'E',
require: '?ngModel',
link: function (scope, element, attrs) {
if (attrs.ngModel) {
val = attrs.value || element.text();
$parse(attrs.ngModel).assign(scope, val);
}
}
}; });Se segui questa strada non dovrai preoccuparti di aggiungere ng-initial a ogni tag. Imposta automaticamente il valore del modello sull'attributo value del tag. Se non si imposta l'attributo value, il valore predefinito sarà una stringa vuota.
Ecco un approccio incentrato sul server:
<html ng-app="project">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script>
// Create your module
var dependencies = [];
var app = angular.module('project', dependencies);
// Create a 'defaults' service
app.value("defaults", /* your server-side JSON here */);
// Create a controller that uses the service
app.controller('PageController', function(defaults, $scope) {
// Populate your model with the service
$scope.card = defaults;
});
</script>
<body>
<div ng-controller="PageController">
<!-- Bind with the standard ng-model approach -->
<input type="text" ng-model="card.description">
</div>
</body>
</html>È la stessa idea di base delle risposte più popolari su questa domanda, ad eccezione di $ fornire.value registra un servizio che contiene i valori predefiniti.
Quindi, sul server, potresti avere qualcosa del tipo:
{
description: "Visa-4242"
}E inseriscilo nella tua pagina tramite la tecnologia lato server di tua scelta. Ecco un riassunto: https://gist.github.com/exclsr/c8c391d16319b2d31a43
Questa è una versione più generica delle idee sopra menzionate ... Controlla semplicemente se c'è qualche valore nel modello e, in caso contrario, imposta il valore sul modello.
JS:
function defaultValueDirective() {
return {
restrict: 'A',
controller: [
'$scope', '$attrs', '$parse',
function ($scope, $attrs, $parse) {
var getter = $parse($attrs.ngModel);
var setter = getter.assign;
var value = getter();
if (value === undefined || value === null) {
var defaultValueGetter = $parse($attrs.defaultValue);
setter($scope, defaultValueGetter());
}
}
]
}
}HTML (esempio di utilizzo):
<select class="form-control"
ng-options="v for (i, v) in compressionMethods"
ng-model="action.parameters.Method"
default-value="'LZMA2'"></select>$scopealla chiamata a getter()- spero che questo chiarisca le cose per chiunque lo stia provando!
Ho provato ciò che suggeriva @Mark Rajcok. Funziona con valori String (Visa-4242). Si prega di fare riferimento a questo violino .
Dal violino:
La stessa cosa che si può fare nel violino può essere fatta usando ng-repeat, cosa che tutti potrebbero consigliare. Ma dopo aver letto la risposta data da @Mark Rajcok, volevo solo provare lo stesso per un modulo con una serie di profili. Le cose funzionano bene finché non ho $ scope.profiles = [{}, {}]; codice nel controller. Se rimuovo questo codice, sto ottenendo errori. Ma in scenari normali non posso stampare $scope.profiles = [{},{}]; mentre stampo o echo html dal server. Sarà possibile eseguire quanto sopra, in modo simile a quanto fatto da @Mark Rajcok per i valori stringa come <input name="card[description]" ng-model="card.description" ng-init="card.description='Visa-4242'">, senza dover ripetere la parte JavaScript dal server.
Aggiunto il supporto per l'elemento selezionato alla "correzione" di Ryan Montgomery
<select class="input-control" ng-model="regCompModel.numberOfEmployeeId" ng-initial>
<option value="1af38656-a752-4a98-a827-004a0767a52d"> More than 500</option>
<option value="233a2783-db42-4fdb-b191-0f97d2d9fd43"> Between 250 and 500</option>
<option value="2bab0669-550c-4555-ae9f-1fdafdb872e5"> Between 100 and 250</option>
<option value="d471e43b-196c-46e0-9b32-21e24e5469b4"> Between 50 and 100</option>
<option value="ccdad63f-69be-449f-8b2c-25f844dd19c1"> Between 20 and 50</option>
<option value="e00637a2-e3e8-4883-9e11-94e58af6e4b7" selected> Less then 20</option>
</select>
app.directive('ngInitial', function () {
return {
restrict: 'A',
controller: ['$scope', '$element', '$attrs', '$parse', function ($scope, $element, $attrs, $parse) {
val = $attrs.sbInitial || $attrs.value || $element.val() || $element.text()
getter = $parse($attrs.ngModel)
setter = getter.assign
setter($scope, val)
}]
}});