Załóżmy, że masz formularz, który zawiera wartości załadowane z bazy danych. Jak inicjalizujesz ng-model?
Przykład:
<input name="card[description]" ng-model="card.description" value="Visa-4242">W moim kontrolerze $ scope.card jest początkowo niezdefiniowana. Czy jest inny sposób niż zrobienie czegoś takiego?
$scope.card = {
description: $('myinput').val()
}Odpowiedzi:
Jest to częsty błąd w nowych aplikacjach Angular. Nie chcesz zapisywać swoich wartości w kodzie HTML na serwerze, jeśli możesz tego uniknąć. W rzeczywistości, jeśli możesz uciec od całkowitego renderowania kodu HTML przez serwer, tym lepiej.
Idealnie byłoby, gdybyś chciał wysłać szablony Angular HTML, a następnie ściągnij swoje wartości przez $ http w formacie JSON i umieść je w swoim zakresie.
Więc jeśli to możliwe, zrób to:
app.controller('MyController', function($scope, $http) {
$http.get('/getCardInfo.php', function(data) {
$scope.card = data;
});
});
<input type="text" ng-model="card.description" />Jeśli absolutnie MUSISZ wyrenderować swoje wartości do kodu HTML ze swojego serwera, możesz umieścić je w zmiennej globalnej i uzyskać do nich dostęp za pomocą $ window:
W nagłówku swojej strony napisałbyś:
<head>
<script>
window.card = { description: 'foo' };
</script>
</head>A potem w kontrolerze otrzymasz to w ten sposób:
app.controller('MyController', function($scope, $window) {
$scope.card = $window.card;
});Mam nadzieję że to pomogło.
Jeśli nie możesz przerobić swojej aplikacji, aby zrobić to, co sugeruje @blesh (ściągnij dane JSON za pomocą $ http lub $ zasób i wypełnij $ scope), możesz zamiast tego użyć ng-init :
<input name="card[description]" ng-model="card.description" ng-init="card.description='Visa-4242'">Zobacz także AngularJS - atrybut wartości w wejściowym polu tekstowym jest ignorowany, gdy używany jest model ng?
ng-initjest bardzo przydatne podczas ustawiania wartości z kodu związanego / postback np <input name="phone" data-ng-model="frm.phone" data-ng-init="frm.phone= '<%: Model.Phone %>'" data-ng-pattern="/^[0-9() \-+]+$/" type="tel" required />. Trochę brzydki? Tak, ale rozwiązuje problem i rozwiązuje problem związany z integracją.
Jest to oczywiście brakująca, ale łatwa do dodania poprawka dla AngularJS. Po prostu napisz szybką dyrektywę, aby ustawić wartość modelu z pola wejściowego.
<input name="card[description]" value="Visa-4242" ng-model="card.description" ng-initial>Oto moja wersja:
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);
}
]
};
});controllerdla swojej dyrektywy i dlaczego nie użyłeś tej linkmetody ?. Jestem nowicjuszem w angularjs
val = $attrs.ngInitial || $attrs.value || $element.val()na, aby działał z wybranymi elementami.
IMHO najlepszym rozwiązaniem jest dyrektywa @Kevin Stone, ale musiałem ją zaktualizować, aby działała w każdych warunkach (np. Select, textarea), a ten na pewno działa:
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);
}
}
}
}
});Możesz użyć niestandardowej dyrektywy (z obsługą textarea, select, radio i checkbox), sprawdź ten post na blogu https://glaucocustodio.github.io/2014/10/20/init-ng-model-from-form- pola-atrybuty / .
Mam proste podejście, ponieważ w moich formularzach mam kilka ciężkich walidacji i masek. Użyłem więc jquery, aby ponownie uzyskać moją wartość i uruchomić zdarzenie „change” na walidacje:
$('#myidelement').val('123');
$('#myidelement').trigger( "change");Jak wskazywali inni, nie jest dobrą praktyką inicjowanie danych w widokach. Zalecane jest jednak zainicjowanie danych na kontrolerach. (patrz http://docs.angularjs.org/guide/controller )
Więc możesz pisać
<input name="card[description]" ng-model="card.description">i
$scope.card = { description: 'Visa-4242' };
$http.get('/getCardInfo.php', function(data) {
$scope.card = data;
});W ten sposób widoki nie zawierają danych, a sterownik inicjalizuje wartość podczas ładowania wartości rzeczywistych.
Jeśli podoba Ci się podejście Kevina Stone'a powyżej https://stackoverflow.com/a/17823590/584761, rozważ łatwiejsze podejście, pisząc dyrektywy dla określonych tagów, takich jak „dane wejściowe”.
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);
}
}
}; });Jeśli wybierzesz tę trasę, nie będziesz musiał się martwić dodawaniem ng-initial do każdego tagu. Automatycznie ustawia wartość modelu na atrybut value tagu. Jeśli nie ustawisz atrybutu wartości, domyślnie będzie to pusty ciąg.
Oto podejście skoncentrowane na serwerze:
<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>Jest to ta sama podstawowa idea, co w bardziej popularnych odpowiedziach na to pytanie, z wyjątkiem $ include.value rejestruje usługę, która zawiera domyślne wartości.
Więc na serwerze mógłbyś mieć coś takiego:
{
description: "Visa-4242"
}I umieść go na swojej stronie za pomocą wybranej przez siebie technologii po stronie serwera. Oto streszczenie: https://gist.github.com/exclsr/c8c391d16319b2d31a43
Ten jest bardziej ogólną wersją pomysłów wymienionych powyżej ... Po prostu sprawdza, czy w modelu jest jakaś wartość, a jeśli nie, ustawia wartość na model.
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 (przykład użycia):
<select class="form-control"
ng-options="v for (i, v) in compressionMethods"
ng-model="action.parameters.Method"
default-value="'LZMA2'"></select>$scopewezwania getter()- mam nadzieję, że to wyjaśni wszystko dla każdego, kto spróbuje tego!
Wypróbowałem to, co zasugerował @Mark Rajcok. Działa dla wartości String (Visa-4242). Proszę, odnieś to skrzypce .
Od skrzypiec:
To samo, co robi się na skrzypcach, można zrobić za pomocą ng-repeat, co każdy mógłby polecić. Ale po przeczytaniu odpowiedzi udzielonej przez @Marka Rajcok chciałem po prostu wypróbować to samo dla formularza z szeregiem profili. Wszystko działa dobrze, dopóki nie mam $ scope.profiles = [{}, {}]; kod w sterowniku. Jeśli usunę ten kod, otrzymuję błędy. Ale w normalnych scenariuszach nie mogę drukować $scope.profiles = [{},{}]; tak, jak drukuję, ani odczytywać HTML z serwera. Czy będzie możliwe wykonanie powyższego w podobny sposób, jak @Mark Rajcok dla wartości łańcuchowych <input name="card[description]" ng-model="card.description" ng-init="card.description='Visa-4242'">, bez konieczności powtarzania części JavaScript z serwera.
Właśnie dodałem obsługę wybranego elementu do „naprawy” Ryana Montgomery'ego
<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)
}]
}});