Veritabanından yüklenen değerlere sahip bir formunuz olduğunu varsayalım. Ng modelini nasıl başlatırsınız?
Misal:
<input name="card[description]" ng-model="card.description" value="Visa-4242">Denetleyicimde $ kapsam.card başlangıçta tanımsız. Böyle bir şey yapmanın bir yolu var mı?
$scope.card = {
description: $('myinput').val()
}Yanıtlar:
Bu, yeni Angular uygulamalarında yaygın bir hatadır. Önleyebiliyorsanız, değerlerinizi sunucudaki HTML kodunuza yazmak istemezsiniz. Aslında, sunucunuzun tamamen HTML oluşturmasını engelleyebilirseniz, çok daha iyi.
İdeal olarak, Angular HTML şablonlarınızı göndermek, ardından değerlerinizi JSON'da $ http aracılığıyla aşağı çekmek ve kapsamınıza koymak istiyorsunuz.
Yani mümkünse şunu yapın:
app.controller('MyController', function($scope, $http) {
$http.get('/getCardInfo.php', function(data) {
$scope.card = data;
});
});
<input type="text" ng-model="card.description" />Değerlerinizi kesinlikle sunucunuzdan HTML'nize dönüştürmeniz ZORUNLUysa, onları global bir değişkene koyabilir ve bunlara $ window ile erişebilirsiniz:
Sayfanızın başlığında şunları yazacaksınız:
<head>
<script>
window.card = { description: 'foo' };
</script>
</head>Ve sonra kontrol cihazınızda şu şekilde elde edersiniz:
app.controller('MyController', function($scope, $window) {
$scope.card = $window.card;
});Umarım bu yardımcı olur.
@Blesh'ın önerdiği şeyi yapmak için uygulamanızı yeniden işleyemiyorsanız (JSON verilerini $ http veya $ resource ile aşağı çekin ve $ kapsam doldurun), bunun yerine ng-init'i kullanabilirsiniz :
<input name="card[description]" ng-model="card.description" ng-init="card.description='Visa-4242'">Ayrıca bkz. AngularJS - Bir ng modeli kullanıldığında, girdi metin kutusundaki değer özelliği yok sayılır.
ng-initarka planda kodlama / postback Örn <input name="phone" data-ng-model="frm.phone" data-ng-init="frm.phone= '<%: Model.Phone %>'" data-ng-pattern="/^[0-9() \-+]+$/" type="tel" required />. Biraz çirkin mi? Evet, ancak hile yapar ve süreçteki bir entegrasyon sorununu çözer.
Bu açıkça eksik, ancak AngularJS için kolayca eklenen bir düzeltmedir. Giriş alanından model değerini ayarlamak için hızlı bir yönerge yazmanız yeterlidir.
<input name="card[description]" value="Visa-4242" ng-model="card.description" ng-initial>İşte benim versiyonum:
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);
}
]
};
});controllerdirektifiniz için tanımladınız ve neden linkyöntemi kullanmadınız ? Angularjs için acemiyim
val = $attrs.ngInitial || $attrs.value || $element.val()belirli öğelerle çalışması için olarak değiştirilmesi gerekiyor .
IMHO en iyi çözüm @Kevin Stone direktifidir, ancak onu her koşulda (fe select, textarea) çalışacak şekilde yükseltmek zorunda kaldım ve bu kesinlikle çalışıyor:
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);
}
}
}
}
});Özel bir yönerge kullanabilir (metin alanı, seçim, radyo ve onay kutusu desteği ile), bu blog gönderisine göz atın https://glaucocustodio.github.io/2014/10/20/init-ng-model-from-form- alanlar-öznitelikler / .
Basit bir yaklaşımım var çünkü formlarımda bazı ağır onaylamalarım ve maskelerim var. Bu yüzden, değerimi tekrar almak için jquery kullandım ve "değişiklik" olayını doğrulamalarda tetikledim:
$('#myidelement').val('123');
$('#myidelement').trigger( "change");Diğerlerinin de belirttiği gibi, verileri görünümler üzerine başlatmak iyi bir uygulama değildir. Bununla birlikte, Kontrolörlerdeki verilerin ilklendirilmesi önerilir. (bkz. http://docs.angularjs.org/guide/controller )
Böylece yazabilirsin
<input name="card[description]" ng-model="card.description">ve
$scope.card = { description: 'Visa-4242' };
$http.get('/getCardInfo.php', function(data) {
$scope.card = data;
});Bu şekilde görünümler veri içermez ve denetleyici gerçek değerler yüklenirken değeri başlatır.
Kevin Stone'un https://stackoverflow.com/a/17823590/584761 üzerindeki yaklaşımını seviyorsanız , 'input' gibi belirli etiketler için yönergeler yazarak daha kolay bir yaklaşım düşünün.
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);
}
}
}; });Bu rotaya giderseniz, her etikete ng-başlangıç eklemek konusunda endişelenmenize gerek kalmaz. Modelin değerini otomatik olarak etiketin değer özniteliğine ayarlar. Değer özelliğini ayarlamazsanız, varsayılan olarak boş bir dizge olacaktır.
İşte sunucu merkezli bir yaklaşım:
<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>Bu soruya verilen daha popüler yanıtlarla aynı temel fikir, $ sağla.value dışında varsayılan değerlerinizi içeren bir hizmeti kaydeder.
Yani, sunucuda aşağıdaki gibi bir şeye sahip olabilirsiniz:
{
description: "Visa-4242"
}Ve bunu, seçtiğiniz sunucu tarafı teknolojisi aracılığıyla sayfanıza yerleştirin. İşte bir Özet: https://gist.github.com/exclsr/c8c391d16319b2d31a43
Bu, yukarıda bahsedilen fikirlerin daha genel bir versiyonudur ... Basitçe modelde herhangi bir değer olup olmadığını kontrol eder, yoksa değeri modele ayarlar.
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 (kullanım örneği):
<select class="form-control"
ng-options="v for (i, v) in compressionMethods"
ng-model="action.parameters.Method"
default-value="'LZMA2'"></select>$scopeçağrıya geçtikten sonra getter()- umarım bu, bunu deneyen başka biri için işleri çözer!
@Mark Rajcok'un önerdiği şeyi denedim. String değerleri için çalışır (Visa-4242). Lütfen bu kemana bakın .
Kemanla:
Kemanla yapılan aynı şey, ng-repeatherkesin tavsiye edebileceği şekilde yapılabilir . Ancak @Mark Rajcok tarafından verilen cevabı okuduktan sonra, aynısını bir dizi profil içeren bir form için denemek istedim. $cope.profiles = [{}, {}]; denetleyicideki kod. Bu kodu kaldırırsam, hata alıyorum. Ancak normal senaryolarda $scope.profiles = [{},{}]; sunucudan html yazdırdığım veya yankıladığım için yazdıramıyorum. <input name="card[description]" ng-model="card.description" ng-init="card.description='Visa-4242'">Sunucudan JavaScript bölümünü yankılamak zorunda kalmadan, @Mark Rajcok gibi dize değerleri için yukarıdakileri benzer bir şekilde çalıştırmak mümkün olacak mı ?
Ryan Montgomery "düzeltmesine" seçilen öğe için destek eklendi
<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)
}]
}});