मान लें कि आपके पास एक फ़ॉर्म है जिसमें डेटाबेस से लोड किए गए मान हैं। आप एनजी-मॉडल को कैसे शुरू करते हैं?
उदाहरण:
<input name="card[description]" ng-model="card.description" value="Visa-4242">मेरे नियंत्रक में, शुरू में $ गुंजाइश.कार्ड अपरिभाषित है। क्या ऐसा कुछ करने के अलावा भी कोई रास्ता है?
$scope.card = {
description: $('myinput').val()
}जवाबों:
नए कोणीय अनुप्रयोगों में यह एक सामान्य गलती है। यदि आप इससे बच सकते हैं तो आप सर्वर पर अपने मूल्यों को अपने HTML में नहीं लिखना चाहते हैं। यदि वास्तव में, यदि आप अपने सर्वर को पूरी तरह से HTML सौंपने से दूर हो सकते हैं, तो सभी बेहतर।
आदर्श रूप से, आप अपने कोणीय HTML टेम्प्लेट को बाहर भेजना चाहते हैं, फिर JSON में $ http के माध्यम से अपने मूल्यों को नीचे खींचें और उन्हें अपने दायरे में रखें।
इसलिए यदि संभव हो तो ऐसा करें:
app.controller('MyController', function($scope, $http) {
$http.get('/getCardInfo.php', function(data) {
$scope.card = data;
});
});
<input type="text" ng-model="card.description" />यदि आप अपने सर्वर से अपने HTML में अपने मूल्यों को पूरी तरह से प्रस्तुत करते हैं, तो आप उन्हें एक वैश्विक चर में डाल सकते हैं और उन्हें $ विंडो के साथ एक्सेस कर सकते हैं:
अपने पृष्ठ के शीर्ष लेख में आप लिखेंगे:
<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-initकोड-पीछे / पोस्टबैक जैसे मान सेट करते समय उपयोग करना काफी उपयोगी है <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 सबसे अच्छा समाधान @ केविन स्टोन निर्देश है, लेकिन मुझे इसे हर हालत में काम करने के लिए अपग्रेड करना था (फे चयन, टेक्सारिया), और यह एक निश्चित रूप से काम कर रहा है:
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-form फ़ील्ड-विशेषताएँ / ।
मेरे पास एक सरल दृष्टिकोण है, क्योंकि मेरे रूपों में कुछ भारी मान्यताएं और मुखौटे हैं। इसलिए, मैंने अपने मूल्य को फिर से प्राप्त करने के लिए 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;
});इस तरह विचारों में डेटा शामिल नहीं है, और नियंत्रक मूल्य को इनिशियलाइज़ करता है जबकि वास्तविक मान लोड किए जा रहे हैं।
अगर आपको केविन स्टोन का दृष्टिकोण https://stackoverflow.com/a/17823590/584761 से ऊपर है, तो 'इनपुट' जैसे विशिष्ट टैग के लिए निर्देश लिखकर एक आसान दृष्टिकोण पर विचार करें ।
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);
}
}
}; });यदि आप इस मार्ग पर जाते हैं तो आपको हर टैग के लिए एनजी-प्रारंभिक जोड़ने की चिंता नहीं करनी होगी। यह स्वचालित रूप से टैग के मूल्य विशेषता के लिए मॉडल के मूल्य को निर्धारित करता है। यदि आप मान विशेषता सेट नहीं करते हैं, तो यह एक रिक्त स्ट्रिंग के लिए डिफ़ॉल्ट होगा।
यहाँ एक सर्वर केंद्रित दृष्टिकोण है:
<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>यह $ प्रदान के अलावा इस सवाल पर अधिक लोकप्रिय जवाब के रूप में एक ही मूल विचार है ऐसी सेवा को पंजीकृत करता है जिसमें आपके डिफ़ॉल्ट मान शामिल होते हैं।
इसलिए, सर्वर पर, आप कुछ इस तरह से हो सकते हैं:
{
description: "Visa-4242"
}और इसे अपनी पसंद के सर्वर-साइड तकनीक के माध्यम से अपने पेज में डालें। यहाँ एक Gist है: https://gist.github.com/exclsr/c8c391d16319b2b313143
यह ऊपर वर्णित विचारों का एक अधिक सामान्य संस्करण है ... यह केवल यह जांचता है कि क्या मॉडल में कोई मूल्य है, और यदि नहीं, तो यह मूल्य को मॉडल पर सेट करता है।
जे एस:
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()- उम्मीद है कि यह किसी और के लिए चीजों को साफ करने की कोशिश कर रहा है!
मैंने कोशिश की कि @ मर्क राजकोक ने क्या सुझाव दिया। स्ट्रिंग मानों के लिए इसका काम कर रहा है (वीजा -4242)। कृपया इस फील को देखें ।
फिडेल से:
फिडेल में वही काम किया जा सकता है ng-repeat, जिसका उपयोग हर कोई कर सकता है। लेकिन @ मर्को राजकोक द्वारा दिए गए उत्तर को पढ़ने के बाद, मैं सिर्फ प्रोफाइल की सरणी के साथ फॉर्म के लिए कोशिश करना चाहता था। चीजें अच्छी तरह से काम करती हैं मेरे पास $ गुंजाइश है। लाभ = = {{}, {}]; नियंत्रक में कोड। यदि मैं इस कोड को हटाता हूं, तो त्रुटियां हो रही हैं। लेकिन सामान्य स्थितियों में मैं $scope.profiles = [{},{}]; सर्वर से HTML प्रिंट या इको प्रिंट नहीं कर सकता। क्या उपरोक्त प्रकार से निष्पादित करना संभव होगा, जैसा @Mark Rajcok ने स्ट्रिंग मानों के लिए किया था <input name="card[description]" ng-model="card.description" ng-init="card.description='Visa-4242'">, जैसे कि सर्वर से जावास्क्रिप्ट भाग को प्रतिध्वनित किए बिना।
रेयान मोंटगोमरी "फिक्स" के लिए चयनित तत्व के लिए बस समर्थन जोड़ा गया
<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)
}]
}});