Katakanlah Anda memiliki formulir yang memuat nilai dari basis data. Bagaimana Anda menginisialisasi model-ng?
Contoh:
<input name="card[description]" ng-model="card.description" value="Visa-4242">Di controller saya, $ scope.card awalnya tidak terdefinisi. Apakah ada cara selain melakukan sesuatu seperti ini?
$scope.card = {
description: $('myinput').val()
}
Jawaban:
Ini adalah kesalahan umum dalam aplikasi Angular baru. Anda tidak ingin menulis nilai-nilai Anda ke dalam HTML di server jika Anda dapat menghindarinya. Jika faktanya, jika Anda bisa mendapatkan server Anda membuat HTML seluruhnya, semuanya lebih baik.
Idealnya, Anda ingin mengirimkan template HTML Sudut Anda, lalu tarik nilai-nilai Anda melalui $ http di JSON dan letakkan di lingkup Anda.
Jadi jika memungkinkan, lakukan ini:
app.controller('MyController', function($scope, $http) {
$http.get('/getCardInfo.php', function(data) {
$scope.card = data;
});
});
<input type="text" ng-model="card.description" />
Jika Anda benar-benar HARUS merender nilai-nilai Anda ke dalam HTML dari server Anda, Anda bisa meletakkannya dalam variabel global dan mengaksesnya dengan $ window:
Di tajuk halaman Anda akan menulis:
<head>
<script>
window.card = { description: 'foo' };
</script>
</head>Dan kemudian di controller Anda, Anda akan mendapatkannya seperti ini:
app.controller('MyController', function($scope, $window) {
$scope.card = $window.card;
});Saya harap itu membantu.
Jika Anda tidak dapat mengerjakan ulang aplikasi Anda untuk melakukan apa yang disarankan @blesh (tarik data JSON turun dengan $ http atau $ resource dan isi $ scope), Anda bisa menggunakan ng-init sebagai gantinya:
<input name="card[description]" ng-model="card.description" ng-init="card.description='Visa-4242'">Lihat juga AngularJS - Atribut nilai pada kotak teks input diabaikan ketika ada model-ng yang digunakan?
ng-initcukup berguna ketika menetapkan nilai dari kode-balik / postback misalnya <input name="phone" data-ng-model="frm.phone" data-ng-init="frm.phone= '<%: Model.Phone %>'" data-ng-pattern="/^[0-9() \-+]+$/" type="tel" required />. Agak jelek? Ya, tetapi apakah trik & mengatasi sakit kepala integrasi dalam proses.
Ini jelas kurang, tetapi perbaikan yang mudah ditambahkan untuk AngularJS. Cukup tulis arahan cepat untuk mengatur nilai model dari bidang input.
<input name="card[description]" value="Visa-4242" ng-model="card.description" ng-initial>Ini versi saya:
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);
}
]
};
});controlleruntuk arahan Anda, dan mengapa tidak menggunakan linkmetode ini ?. Saya pemula untuk angularjs
val = $attrs.ngInitial || $attrs.value || $element.val()bisa berfungsi dengan elemen tertentu.
IMHO solusi terbaik adalah arahan @Kevin Stone, tetapi saya harus memutakhirkannya agar berfungsi di setiap kondisi (pilih, textarea), dan yang ini pasti bekerja:
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);
}
}
}
}
});Anda dapat menggunakan arahan khusus (dengan dukungan untuk textarea, pilih, radio dan kotak centang), periksa posting blog ini https://glaucocustodio.github.io/2014/10/20/init-ng-model-from-form- bidang-atribut / .
Saya memiliki pendekatan sederhana, karena saya memiliki beberapa validasi dan topeng berat dalam formulir saya. Jadi, saya menggunakan jquery untuk mendapatkan nilai saya lagi dan menjalankan acara "ubah" ke validasi:
$('#myidelement').val('123');
$('#myidelement').trigger( "change");Seperti yang ditunjukkan orang lain, bukan praktik yang baik untuk menginisialisasi data pada tampilan. Akan tetapi, menginisialisasi data tentang Pengendali. (lihat http://docs.angularjs.org/guide/controller )
Jadi kamu bisa menulis
<input name="card[description]" ng-model="card.description">dan
$scope.card = { description: 'Visa-4242' };
$http.get('/getCardInfo.php', function(data) {
$scope.card = data;
});Dengan cara ini pandangan tidak mengandung data, dan pengontrol menginisialisasi nilai saat nilai nyata sedang dimuat.
Jika Anda menyukai pendekatan Kevin Stone di atas https://stackoverflow.com/a/17823590/584761 pertimbangkan pendekatan yang lebih mudah dengan menulis arahan untuk tag tertentu seperti '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);
}
}
}; });Jika Anda memilih rute ini, Anda tidak perlu khawatir tentang menambahkan-inisial ke setiap tag. Secara otomatis menetapkan nilai model ke atribut nilai tag. Jika Anda tidak menetapkan atribut nilai, maka nilai tersebut akan default ke string kosong.
Berikut adalah pendekatan server-centric:
<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>Ini adalah ide dasar yang sama dengan jawaban yang lebih populer pada pertanyaan ini, kecuali $ supply.value mendaftarkan layanan yang berisi nilai default Anda.
Jadi, di server, Anda dapat memiliki sesuatu seperti:
{
description: "Visa-4242"
}Dan memasukkannya ke halaman Anda melalui teknologi sisi server pilihan Anda. Inilah Intisari: https://gist.github.com/exclsr/c8c391d16319b2d31a43
Yang ini adalah versi yang lebih umum dari ide-ide yang disebutkan di atas ... Ini hanya memeriksa apakah ada nilai dalam model, dan jika tidak, itu menetapkan nilai ke 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 (contoh penggunaan):
<select class="form-control"
ng-options="v for (i, v) in compressionMethods"
ng-model="action.parameters.Method"
default-value="'LZMA2'"></select>$scopepanggilan untuk getter()- berharap ini jelas bagi orang lain yang mencoba ini!
Saya mencoba apa yang disarankan oleh @Mark Rajcok. Ini berfungsi untuk nilai-nilai String (Visa-4242). Silakan merujuk biola ini .
Dari biola:
Hal yang sama yang dilakukan dalam biola dapat dilakukan menggunakan ng-repeat, yang semua orang bisa merekomendasikan. Tetapi setelah membaca jawaban yang diberikan oleh @Mark Rajcok, saya hanya ingin mencoba yang sama untuk formulir dengan berbagai profil. Semuanya berjalan dengan baik sampai saya memiliki $ scope.profiles = [{}, {}]; kode dalam pengontrol. Jika saya menghapus kode ini, saya mendapat kesalahan. Tetapi dalam skenario normal saya tidak dapat mencetak $scope.profiles = [{},{}]; karena saya mencetak atau gema html dari server. Apakah mungkin untuk mengeksekusi di atas, dengan cara yang sama seperti @Mark Rajcok lakukan untuk nilai-nilai string seperti <input name="card[description]" ng-model="card.description" ng-init="card.description='Visa-4242'">, tanpa harus menggemakan bagian JavaScript dari server.
Baru saja menambahkan dukungan untuk elemen pilih ke Ryan Montgomery "fix"
<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)
}]
}});