Angenommen, Sie haben ein Formular, in das Werte aus der Datenbank geladen wurden. Wie initialisiere ich ng-model?
Beispiel:
<input name="card[description]" ng-model="card.description" value="Visa-4242">In meinem Controller ist $ scope.card anfangs undefiniert. Gibt es einen anderen Weg, als so etwas zu tun?
$scope.card = {
description: $('myinput').val()
}
Antworten:
Dies ist ein häufiger Fehler bei neuen Angular-Anwendungen. Sie möchten Ihre Werte nicht in Ihren HTML-Code auf dem Server schreiben, wenn Sie dies vermeiden können. Umso besser, wenn Sie es vermeiden können, dass Ihr Server HTML vollständig rendert.
Idealerweise möchten Sie Ihre Angular-HTML-Vorlagen versenden, dann Ihre Werte über $ http in JSON abrufen und in Ihren Bereich einfügen.
Wenn möglich, machen Sie Folgendes:
app.controller('MyController', function($scope, $http) {
$http.get('/getCardInfo.php', function(data) {
$scope.card = data;
});
});
<input type="text" ng-model="card.description" />
Wenn Sie Ihre Werte unbedingt von Ihrem Server in Ihren HTML-Code rendern MÜSSEN, können Sie sie in eine globale Variable einfügen und mit $ window darauf zugreifen:
In die Kopfzeile Ihrer Seite würden Sie schreiben:
<head>
<script>
window.card = { description: 'foo' };
</script>
</head>
Und dann würden Sie es in Ihrem Controller so bekommen:
app.controller('MyController', function($scope, $window) {
$scope.card = $window.card;
});
Ich hoffe das hilft.
Wenn Sie Ihre App nicht überarbeiten können, um das zu tun, was @blesh vorschlägt (JSON-Daten mit $ http oder $ resource nach unten ziehen und $ scope auffüllen), können Sie stattdessen ng-init verwenden:
<input name="card[description]" ng-model="card.description" ng-init="card.description='Visa-4242'">Siehe auch AngularJS - Wertattribut in einem Eingabetextfeld wird ignoriert, wenn ein ng-Modell verwendet wird.
ng-init-Webformularen und finde, dass die Verwendung sehr nützlich ist, wenn Werte aus Code-Behind / Postback festgelegt werden <input name="phone" data-ng-model="frm.phone" data-ng-init="frm.phone= '<%: Model.Phone %>'" data-ng-pattern="/^[0-9() \-+]+$/" type="tel" required />. Etwas hässlich? Ja, aber der Trick & löst dabei Integrationsprobleme.
Dies ist eine offensichtlich fehlende, aber leicht hinzuzufügende Lösung für AngularJS. Schreiben Sie einfach eine Kurzanweisung, um den Modellwert aus dem Eingabefeld festzulegen.
<input name="card[description]" value="Visa-4242" ng-model="card.description" ng-initial>Hier ist meine Version:
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);
}
]
};
});
controllerfür Ihre Direktive definiert und warum haben Sie die linkMethode nicht verwendet ? Ich bin Neuling bei Angularjs
val = $attrs.ngInitial || $attrs.value || $element.val()damit es mit ausgewählten Elementen funktioniert.
IMHO ist die beste Lösung die @ Kevin Stone-Direktive, aber ich musste sie aktualisieren, um unter allen Bedingungen (zB select, textarea) zu funktionieren, und diese funktioniert mit Sicherheit:
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);
}
}
}
}
});
Sie können eine benutzerdefinierte Direktive verwenden (mit Unterstützung für Textbereich, Auswahl, Radio und Kontrollkästchen). Lesen Sie diesen Blog-Beitrag unter https://glaucocustodio.github.io/2014/10/20/init-ng-model-from-form- Felder-Attribute / .
Ich habe einen einfachen Ansatz, weil ich einige umfangreiche Validierungen und Masken in meinen Formularen habe. Also habe ich jquery verwendet, um meinen Wert wieder zu erhalten und das Ereignis "change" auf Validierungen auszulösen:
$('#myidelement').val('123');
$('#myidelement').trigger( "change");
Wie andere betonten, ist es nicht empfehlenswert, Daten in Ansichten zu initialisieren. Es wird jedoch empfohlen, Daten auf Controllern zu initialisieren. (siehe http://docs.angularjs.org/guide/controller )
So können Sie schreiben
<input name="card[description]" ng-model="card.description">und
$scope.card = { description: 'Visa-4242' };
$http.get('/getCardInfo.php', function(data) {
$scope.card = data;
});
Auf diese Weise enthalten die Ansichten keine Daten, und der Controller initialisiert den Wert, während die realen Werte geladen werden.
Wenn Ihnen der Ansatz von Kevin Stone über https://stackoverflow.com/a/17823590/584761 gefällt, sollten Sie einen einfacheren Ansatz in Betracht ziehen, indem Sie Anweisungen für bestimmte Tags wie "Eingabe" schreiben.
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);
}
}
}; });Wenn Sie diesen Weg gehen, müssen Sie sich nicht darum kümmern, jedem Tag ng-initial hinzuzufügen. Der Wert des Modells wird automatisch auf das Wertattribut des Tags gesetzt. Wenn Sie das Wertattribut nicht festlegen, wird standardmäßig eine leere Zeichenfolge verwendet.
Hier ist ein serverzentrierter Ansatz:
<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>Dies ist die gleiche Grundidee wie die gängigsten Antworten auf diese Frage, außer dass $ require.value einen Dienst registriert, der Ihre Standardwerte enthält.
Auf dem Server könnten Sie also Folgendes haben:
{
description: "Visa-4242"
}Und fügen Sie es über die serverseitige Technologie Ihrer Wahl in Ihre Seite ein. Hier ist eine Zusammenfassung: https://gist.github.com/exclsr/c8c391d16319b2d31a43
Dies ist eine allgemeinere Version der oben genannten Ideen ... Es wird lediglich geprüft, ob das Modell einen Wert enthält, und wenn nicht, wird der Wert auf das Modell festgelegt.
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 (Anwendungsbeispiel):
<select class="form-control"
ng-options="v for (i, v) in compressionMethods"
ng-model="action.parameters.Method"
default-value="'LZMA2'"></select>$scopezum Anruf getter()übergegangen bin - hoffe, das klärt die Dinge für alle anderen, die dies versuchen!
Ich habe versucht, was @ Mark Rajcok vorgeschlagen hat. Es funktioniert für String-Werte (Visa-4242). Bitte beziehen Sie sich auf diese Geige .
Aus der Geige:
Das gleiche, was in der Geige gemacht wird, kann mit gemacht werden ng-repeat, was jeder empfehlen kann. Aber nachdem ich die Antwort von @Mark Rajcok gelesen hatte, wollte ich dasselbe nur für ein Formular mit einer Reihe von Profilen versuchen. Die Dinge funktionieren gut, bis ich die $ scope.profiles = [{}, {}] habe; Code in der Steuerung. Wenn ich diesen Code entferne, bekomme ich Fehler. Aber in normalen Szenarien kann ich nicht drucken, $scope.profiles = [{},{}]; während ich HTML vom Server drucke oder wiedergebe. Wird es möglich sein, das oben Genannte auf ähnliche Weise wie @Mark Rajcok für die Zeichenfolgenwerte wie auszuführen <input name="card[description]" ng-model="card.description" ng-init="card.description='Visa-4242'">, ohne den JavaScript-Teil vom Server wiederholen zu müssen?
Gerade Unterstützung für ausgewähltes Element zu Ryan Montgomery "Fix" hinzugefügt
<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)
}]
}});