สมมติว่าคุณมีฟอร์มที่โหลดค่าจากฐานข้อมูล คุณเริ่มต้น ng-model ได้อย่างไร?
ตัวอย่าง:
<input name="card[description]" ng-model="card.description" value="Visa-4242">ในตัวควบคุมของฉัน $ scope.card ไม่ได้กำหนดไว้ในตอนแรก มีวิธีนอกเหนือจากการทำสิ่งนี้หรือไม่?
$scope.card = {
description: $('myinput').val()
}คำตอบ:
นี่เป็นข้อผิดพลาดทั่วไปในแอปพลิเคชัน Angular ใหม่ คุณไม่ต้องการเขียนค่าของคุณลงใน HTML ของคุณบนเซิร์ฟเวอร์หากคุณสามารถหลีกเลี่ยงได้ หากคุณสามารถหลีกเลี่ยงการให้เซิร์ฟเวอร์ของคุณแสดง HTML ได้ทั้งหมดก็ยิ่งดี
ตามหลักการแล้วคุณต้องการส่งเทมเพลต Angular HTML ของคุณจากนั้นดึงค่าของคุณผ่าน $ http ใน JSON และวางไว้ในขอบเขตของคุณ
ดังนั้นหากเป็นไปได้ให้ทำสิ่งนี้:
app.controller('MyController', function($scope, $http) {
$http.get('/getCardInfo.php', function(data) {
$scope.card = data;
});
});
<input type="text" ng-model="card.description" />หากคุณต้องแสดงค่าของคุณใน HTML จากเซิร์ฟเวอร์ของคุณอย่างแน่นอนคุณสามารถใส่ค่าเหล่านี้ในตัวแปรส่วนกลางและเข้าถึงได้ด้วย $ window:
ในส่วนหัวของเพจคุณจะต้องเขียน:
<head>
<script>
window.card = { description: 'foo' };
</script>
</head>จากนั้นในคอนโทรลเลอร์ของคุณคุณจะได้รับสิ่งนี้:
app.controller('MyController', function($scope, $window) {
$scope.card = $window.card;
});ฉันหวังว่าจะช่วยได้
หากคุณไม่สามารถปรับเปลี่ยนแอปของคุณให้ทำตามที่ @blesh แนะนำได้ (ดึงข้อมูล JSON ลงด้วยทรัพยากร $ http หรือ $ และเติมข้อมูล $ ขอบเขต) คุณสามารถใช้ng-initแทน:
<input name="card[description]" ng-model="card.description" ng-init="card.description='Visa-4242'">ดูเพิ่มเติมAngularJS - แอตทริบิวต์ค่าบนกล่องข้อความอินพุตถูกละเว้นเมื่อมีการใช้ ng-model?
ng-initเป็นประโยชน์มากเมื่อตั้งค่าจาก behind รหัส / postback <input name="phone" data-ng-model="frm.phone" data-ng-init="frm.phone= '<%: Model.Phone %>'" data-ng-pattern="/^[0-9() \-+]+$/" type="tel" required />เช่น น่าเกลียดไปหน่อย? ใช่ แต่เคล็ดลับและแก้อาการปวดหัวแบบบูรณาการในกระบวนการนี้
นี่เป็นข้อบกพร่องที่เห็นได้ชัด แต่เพิ่มการแก้ไขสำหรับ AngularJS ได้อย่างง่ายดาย เพียงเขียนคำสั่งด่วนเพื่อตั้งค่าโมเดลจากช่องป้อนข้อมูล
<input name="card[description]" value="Visa-4242" ng-model="card.description" ng-initial>นี่คือเวอร์ชันของฉัน:
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);
}
]
};
});controllerคำสั่งของคุณและทำไมไม่ใช้linkวิธีนี้?. ฉันเป็นมือใหม่กับ angularjs
val = $attrs.ngInitial || $attrs.value || $element.val()ให้สามารถทำงานกับองค์ประกอบที่เลือกได้
IMHO ทางออกที่ดีที่สุดคือ @Kevin Stone directive แต่ฉันต้องอัปเกรดให้ทำงานในทุกเงื่อนไข (fe select, textarea) และอันนี้ใช้ได้ผลแน่นอน:
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);
}
}
}
}
});คุณสามารถใช้คำสั่งที่กำหนดเองได้ (พร้อมการสนับสนุน textarea เลือกวิทยุและช่องทำเครื่องหมาย) ตรวจสอบโพสต์บล็อกนี้https://glaucocustodio.github.io/2014/10/20/init-ng-model-from-form- ฟิลด์แอตทริบิวต์ / .
คุณยังสามารถใช้ภายในโค้ด HTML ของคุณ:
ng-init="card.description = 12345"
Angular ไม่แนะนำและตามที่กล่าวไว้ข้างต้นคุณควรใช้คอนโทรลเลอร์ของคุณโดยเฉพาะ
แต่มันใช้งานได้ :)
ฉันมีวิธีง่ายๆเพราะฉันมีการตรวจสอบความถูกต้องและมาสก์ในแบบฟอร์ม ดังนั้นฉันจึงใช้ jquery เพื่อรับค่าของฉันอีกครั้งและเริ่มเหตุการณ์ "เปลี่ยน" เป็นการตรวจสอบความถูกต้อง:
$('#myidelement').val('123');
$('#myidelement').trigger( "change");ตามที่คนอื่น ๆ ชี้ให้เห็นการเริ่มต้นข้อมูลในมุมมองไม่ใช่แนวทางที่ดี อย่างไรก็ตามขอแนะนำให้เริ่มต้นข้อมูลบนคอนโทรลเลอร์ (ดูhttp://docs.angularjs.org/guide/controller )
คุณสามารถเขียน
<input name="card[description]" ng-model="card.description">และ
$scope.card = { description: 'Visa-4242' };
$http.get('/getCardInfo.php', function(data) {
$scope.card = data;
});วิธีนี้ทำให้มุมมองไม่มีข้อมูลและคอนโทรลเลอร์จะเริ่มต้นค่าในขณะที่กำลังโหลดค่าจริง
หากคุณชอบแนวทางของ Kevin Stone ข้างต้นhttps://stackoverflow.com/a/17823590/584761 ลอง พิจารณาแนวทางที่ง่ายกว่าโดยการเขียนคำสั่งสำหรับแท็กเฉพาะเช่น '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);
}
}
}; });หากคุณไปเส้นทางนี้คุณจะไม่ต้องกังวลกับการเพิ่ม ng-initial ในทุกแท็ก โดยจะตั้งค่าของแบบจำลองเป็นแอตทริบิวต์ค่าของแท็กโดยอัตโนมัติ หากคุณไม่ได้ตั้งค่าแอตทริบิวต์ value ค่าเริ่มต้นจะเป็นสตริงว่าง
นี่คือแนวทางที่เน้นเซิร์ฟเวอร์เป็นศูนย์กลาง:
<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>เป็นแนวคิดพื้นฐานเช่นเดียวกับคำตอบที่เป็นที่นิยมมากกว่าสำหรับคำถามนี้ยกเว้น$ give.value จะลงทะเบียนบริการที่มีค่าเริ่มต้นของคุณ
ดังนั้นบนเซิร์ฟเวอร์คุณสามารถมีสิ่งต่างๆเช่น:
{
description: "Visa-4242"
}และใส่ลงในเพจของคุณผ่านทางเทคโนโลยีฝั่งเซิร์ฟเวอร์ที่คุณเลือก นี่คือส่วนสำคัญ: https://gist.github.com/exclsr/c8c391d16319b2d31a43
อันนี้เป็นแนวคิดทั่วไปที่กล่าวถึงข้างต้น ... เพียงแค่ตรวจสอบว่ามีค่าใด ๆ ในโมเดลหรือไม่และหากไม่เป็นเช่นนั้นระบบจะตั้งค่าเป็นโมเดล
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 (ตัวอย่างการใช้งาน):
<select class="form-control"
ng-options="v for (i, v) in compressionMethods"
ng-model="action.parameters.Method"
default-value="'LZMA2'"></select>$scopeการโทรไปgetter()- หวังว่าสิ่งนี้จะช่วยให้ทุกคนได้ลองทำสิ่งนี้!
ฉันลองสิ่งที่ @Mark Rajcok แนะนำ ใช้งานได้กับค่า String (Visa-4242) โปรดอ้างอิงซอนี้
จากซอ:
สิ่งเดียวกับที่ทำในซอสามารถทำได้โดยng-repeatทุกคนสามารถแนะนำได้ แต่หลังจากอ่านคำตอบที่ได้รับจาก @Mark Rajcok ฉันแค่อยากจะลองทำแบบเดียวกันกับรูปแบบที่มีโปรไฟล์มากมาย ทุกอย่างทำงานได้ดีจนกระทั่งฉันมี $ scope.profiles = [{}, {}]; รหัสในตัวควบคุม ถ้าฉันลบรหัสนี้ฉันจะได้รับข้อผิดพลาด แต่ในสถานการณ์ปกติฉันไม่สามารถพิมพ์$scope.profiles = [{},{}]; ขณะที่ฉันพิมพ์หรือ echo html จากเซิร์ฟเวอร์ จะเป็นไปได้ไหมที่จะดำเนินการข้างต้นในลักษณะเดียวกันกับที่ @Mark Rajcok ทำกับค่าสตริงเช่น<input name="card[description]" ng-model="card.description" ng-init="card.description='Visa-4242'">โดยไม่ต้องสะท้อนส่วน JavaScript จากเซิร์ฟเวอร์
เพิ่งเพิ่มการสนับสนุนสำหรับองค์ประกอบที่เลือกให้ 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)
}]
}});
หากคุณมีค่า init ใน URL เช่นmypage/idนั้นในตัวควบคุมของ JS เชิงมุมคุณสามารถใช้location.pathnameเพื่อค้นหา id และกำหนดให้กับโมเดลที่คุณต้องการ