AngularJS - इनपुट टेक्स्ट बॉक्स पर मूल्य विशेषता को नजरअंदाज कर दिया जाता है, जब एनजी-मॉडल का उपयोग किया जाता है?

Question

अगर मैं नीचे "बॉब" की तरह कुछ के लिए एक साधारण इनपुट पाठ बॉक्स मान सेट करता हूँ, तो AngularJS का उपयोग करना। यदि ng-modelविशेषता जोड़ी जाती है , तो मान प्रदर्शित नहीं होता है।

    <input type="text"
           id="rootFolder"
           ng-model="rootFolders"
           disabled="disabled"
           value="Bob"
           size="40"/>

किसी को भी एक साधारण काम के बारे में पता है कि इस इनपुट को कुछ करने के लिए डिफ़ॉल्ट रखें और रखें ng-model? मैंने ng-bindडिफ़ॉल्ट मान के साथ उपयोग करने की कोशिश की लेकिन ऐसा लगता है कि या तो काम नहीं कर रहा है।

Answer 1

यह वांछित व्यवहार है, आपको नियंत्रक को मॉडल में परिभाषित करना चाहिए, न कि दृश्य में।

<div ng-controller="Main">
  <input type="text" ng-model="rootFolders">
</div>


function Main($scope) {
  $scope.rootFolders = 'bob';
}

Comments

धन्यवाद। लेकिन इस मामले में, मॉडल नियंत्रक में सेट है। और कोणीय डॉक्स में, यह हमेशा समान होता है, डेटा कंट्रोलर में सेट होता है। लेकिन मेरा कंट्रोलर एक जेएस फाइल में है। "एडिट" फॉर्म पर कैसे करें? नियंत्रक "कोणीय तरीके" के लिए डिफ़ॉल्ट फॉर्म डेटा कैसे पास करें?

— ११

हालांकि यह मेरे लिए काम नहीं करता है क्योंकि मार्क राजकॉक द्वारा दिखाए गए अतिरिक्त विशेषता एनजी-इनिट (एनजी-इनिट = "रूटफॉल्डर्स = 'बॉब'") ठीक काम करता है।

— कैसर लक्ष्मीधर

और अगर मेरे पास इनपुट फ़ील्ड है तो मैं डिफ़ॉल्ट मान कैसे सेट कर सकता हूं: जैसे <इनपुट प्रकार = "नंबर" एनजी-मॉडल = "न्यूट्रांसएक्शन [$ इंडेक्स] [user.email]" />?

— शिश

Answer 2

वोज्टा ने "कोणीय तरीके" का वर्णन किया, लेकिन अगर आपको वास्तव में यह काम करने की आवश्यकता है, तो @ डरबन ने हाल ही में एनजी-इनिट का उपयोग करके वर्कअराउंड पोस्ट किया:

<input type="text" ng-model="rootFolders" ng-init="rootFolders='Bob'" value="Bob">

https://groups.google.com/d/msg/angular/Hn3eztNHFXw/wk3HyOl9fhcJ

Comments

आपको 'मान = "बॉब" भाग की आवश्यकता नहीं हो सकती है।

— मार्क राजकोक

+1 लेकिन, जैसा कि लिंक किए गए चर्चा में दिए गए पदों में से एक में उल्लेख किया गया है, इसे टाला जाना चाहिए (जैसा कि तार्किक रूप से यह कम सही है और यह कठिन बनाता है)।

— 0xc0de

यदि आप किसी मॉडल मान का उपयोग v1.2 पर करते हैं तो यह विधि ठीक काम करती है। <... एनजी-इनिट = "rootFolders = someModelAttribute" ...>

— dmcqu314

@MarkRajcok, आपके पास ढेर ओवरफ़्लो पर बहुत सारे महान कोणीयराज पोस्टिंग हैं! एसओ समुदाय के साथ अपनी अंतर्दृष्टि साझा करने के लिए समर्पित सभी समय के लिए धन्यवाद। मुझे यकीन है कि मैं कई राहत प्राप्त डेवलपर्स के लिए बोलता हूं जब मैं कहता हूं कि हम ईमानदारी से उन सभी घंटों की सराहना करते हैं जो आपने हमें बचाए हैं!

— जेरेमी मोरित्ज़

वास्तव में मार्क के जवाब की सराहना करते हैं क्योंकि इससे मेरी समस्या हल हो गई। मैं पुष्टि करता हूं कि हमें value="Bob"इनपुट टैग में भाग की आवश्यकता नहीं है ।

— Devner

Answer 3

इनपुट निर्देश को ओवरराइड करने से कार्य करने लगता है। मैंने डैन हन्सेकर के कोड में कुछ छोटे बदलाव किए :

• $parse().assign()NgModel विशेषताओं के बिना फ़ील्ड पर उपयोग करने का प्रयास करने से पहले ngModel के लिए एक चेक जोड़ा गया ।
• assign()फ़ंक्शन परम आदेश को ठीक किया ।

app.directive('input', function ($parse) {
  return {
    restrict: 'E',
    require: '?ngModel',
    link: function (scope, element, attrs) {
      if (attrs.ngModel && attrs.value) {
        $parse(attrs.ngModel).assign(scope, attrs.value);
      }
    }
  };
});

Comments

यह सबसे अच्छा जवाब है जो मुझे मिला! ... मेरी समस्या को एक सुरुचिपूर्ण तरीके से हल करता है। मुझे एक छिपे हुए इनपुट (एक सिम्फनी फॉर्म टोकन, सर्वर में उत्पन्न) पर एक मूल्य पर कब्जा करना था।

— पचिनएसवी

यह न केवल चतुर है बल्कि सबसे अच्छा समाधान है। मेरे मामले में, मैं नियंत्रक पर एनजी-मॉडल का डिफ़ॉल्ट मान सेट नहीं कर सकता क्योंकि एक PHP फॉर्म है, यदि सर्वर-साइड सत्यापन विफल हो जाता है, तो फॉर्म रीफ़्रेश हो जाएगा और जो भी एनजी-मॉडल में है वह इनपुट मूल्य हटा देगा। भी।

— लुइस एलियांडो

यह सबसे अच्छा समाधान लगता है यदि आप जावास्क्रिप्ट के बिना काम करने के लिए अपने HTML फॉर्म का एक मूल संस्करण भी चाहते हैं।

— डैरेन

उत्कृष्ट समाधान जो वास्तव में कोणीय के भीतर एक गैर-डिफ़ॉल्ट कॉन्फ़िगर करने योग्य विकल्प होना चाहिए।

— ग्रेसी

आपके समाधान के लिए धन्यवाद। आप नंबर इनपुट समस्या को कैसे हल करेंगे? यह एक त्रुटि docs.angularjs.org/error/ngModel/numfmt?p0=20.12

— mate.gwozdz

Answer 4

कोणीय तरीका

ऐसा करने का सही कोणीय तरीका है कि एक पेज ऐप, AJAX को फॉर्म टेम्प्लेट में लिखें, फिर इसे मॉडल से गतिशील रूप से पॉप्युलेट करें। मॉडल डिफ़ॉल्ट रूप से फॉर्म से आबादी नहीं है क्योंकि मॉडल सत्य का एकल स्रोत है। इसके बजाय कोणीय दूसरे तरीके से जाएगा और मॉडल से फॉर्म को पॉप्युलेट करने की कोशिश करेगा।

हालांकि, आपके पास खरोंच से शुरू होने का समय नहीं है

यदि आपके पास एक ऐप लिखा है, तो इसमें कुछ काफी हद तक वास्तु परिवर्तन शामिल हो सकते हैं। यदि आप एक मौजूदा फ़ॉर्म को बढ़ाने के लिए कोणीय का उपयोग करने की कोशिश कर रहे हैं, तो स्क्रैच से पूरे एकल पृष्ठ ऐप का निर्माण करने के बजाय, आप फॉर्म से मूल्य खींच सकते हैं और इसे एक निर्देश का उपयोग करके लिंक समय पर स्कोप में स्टोर कर सकते हैं। कोणीय फिर मान को फॉर्म में वापस बाँध देगा और इसे सिंक में रखेगा।

एक निर्देश का उपयोग करना

आप फॉर्म से मूल्य खींचने के लिए अपेक्षाकृत सरल निर्देश का उपयोग कर सकते हैं और इसे वर्तमान दायरे में लोड कर सकते हैं। यहाँ मैंने एक initFromForm निर्देश को परिभाषित किया है।

var myApp = angular.module("myApp", ['initFromForm']);

angular.module('initFromForm', [])
  .directive("initFromForm", function ($parse) {
    return {
      link: function (scope, element, attrs) {
        var attr = attrs.initFromForm || attrs.ngModel || element.attrs('name'),
        val = attrs.value;
        if (attrs.type === "number") {val = parseInt(val)}
        $parse(attr).assign(scope, val);
      }
    };
  });

आप देख सकते हैं कि मैंने मॉडल नाम पाने के लिए कुछ कमियां परिभाषित की हैं। आप इस निर्देश को ngModel निर्देश के साथ संयोजन में उपयोग कर सकते हैं, या यदि आप चाहें तो $ स्कोप के अलावा किसी अन्य चीज़ से बाँध सकते हैं।

इसे इस तरह उपयोग करें:

<input name="test" ng-model="toaster.test" value="hello" init-from-form />
{{toaster.test}}

ध्यान दें कि यह भी textareas के साथ काम करेगा, और ड्रॉपडाउन का चयन करेगा।

<textarea name="test" ng-model="toaster.test" init-from-form>hello</textarea>
{{toaster.test}}

Comments

यहाँ एक पैक्ड मॉड्यूल है जो यहाँ वर्णित के समान एक समाधान को लागू करता है github.com/platanus/angular-keep-values

— Agustin

महान समाधान, लेकिन यह केवल साथ काम करेगा input="text"। यदि आपके पास numberयह है तो फेंक देंगे मॉडल प्रकार number docs.angularjs.org/error/ngModel/numfmt?p0=333

— smoksnes

संख्याओं का समर्थन करने के लिए आप जोड़ सकते हैं if (attrs.type === "number") val = parseInt(val);

— स्मोकनेस

@smoksnes - आप बिल्कुल सही हैं। मैंने उत्तर अपडेट किया है :)

— सुपरल्यूमिनरी

Answer 5

अपडेट: नियंत्रक से जुड़े मेरे मूल उत्तर में DOM-जागरूक कोड होता है, जो HTML के पक्ष में कोणीय सम्मेलनों को तोड़ता है। @dmackerman ने मेरे उत्तर पर एक टिप्पणी में निर्देशों का उल्लेख किया है, और मैं पूरी तरह से अब तक याद किया है। उस इनपुट के साथ, एंगुलर या एचटीएमएल सम्मेलनों को तोड़े बिना यह करने का सही तरीका है :

---

दोनों को प्राप्त करने का एक तरीका भी है - तत्व के मूल्य को पकड़ो और एक निर्देश में मॉडल को अपडेट करने के लिए इसका उपयोग करें:

<div ng-controller="Main">
    <input type="text" id="rootFolder" ng-model="rootFolders" disabled="disabled" value="Bob" size="40" />
</div>

और फिर:

app.directive('input', ['$parse', function ($parse) {
    return {
        restrict: 'E',
        require: '?ngModel',
        link: function (scope, element, attrs) {
            if(attrs.value) {
                $parse(attrs.ngModel).assign(scope, attrs.value);
            }
        }
    };
}]);

आप निश्चित रूप से उपरोक्त valueमान को संशोधित कर सकते हैं कि मॉडल को उसके मूल्य पर सेट करने से पहले विशेषता के साथ अधिक करें , विशेषता को एक कोणीय अभिव्यक्ति के रूप में $parse(attrs.value, scope)व्यवहार करने के लिए उपयोग करें value(हालांकि मैं शायद इसके लिए एक अलग [कस्टम] विशेषता का उपयोग करूंगा, व्यक्तिगत रूप से इसलिए मानक HTML विशेषताओं को लगातार स्थिरांक माना जाता है)।

इसके अलावा, एनजी-मॉडल के लिए उपलब्ध डेटा को अस्थायी बनाना भी एक ऐसा ही सवाल है जो ब्याज का भी हो सकता है।

Comments

आपको अपने नियंत्रकों में कोई डोम हेरफेर / खोज नहीं करनी चाहिए। इसके बजाय एक निर्देश का उपयोग करना चाहिए।

— dmackerman

मैंने स्पष्ट रूप से अपने उत्तर में उस कमी का उल्लेख किया है। आपको नहीं करना चाहिए , लेकिन आप कर सकते हैं । यह सब इस बात पर निर्भर करता है कि क्या आप कोणीय या HTML के सम्मेलनों का पालन करना अधिक महत्वपूर्ण समझते हैं। क्योंकि कोणीय HTML को तोड़ता है।

— दान हन्सेकर

ओह, मैं कर रहा हूँ एक डमी। एक निर्देश का उपयोग करने के बारे में पूरी तरह से याद किया। तदनुसार अद्यतन किया गया। आप के लिए एक झटका होने के लिए ईमानदारी से माफी, @dmackerman।

— दान हन्सेकर

निर्देश के लिए धन्यवाद! इसने मुझे एक ऐसे प्रोजेक्ट में आवेदन करने के लिए विचार दिया, जिस पर मैं काम कर रहा हूं, जहां मैं कुछ कंटेंट सर्वर साइड जनरेट करता हूं और फिर इसे क्लाइंट में अपने मॉडल के रूप में उपयोग करना होता है।

— गलगमाजर

मैं खुशी से मदद कर सकता है। बेशक, आम तौर पर बोलते हुए, आप JSON के रूप में अपने सर्वर-साइड कंटेंट का निर्माण करना चाहते हैं और आपके ऐप ने उसके आधार पर मॉडल में हेरफेर किया है, लेकिन कभी-कभी यह अन्य विकल्पों के लिए उपयोगी होता है, और यह एक है।

— दान हन्सेकर

Answer 6

यदि आप AngularJs ngModel निर्देश का उपयोग करते हैं, तो याद रखें कि valueविशेषता का मान ngModel फ़ील्ड पर नहीं बंधता है । आपको इसे अपने आप से इनवेट करना होगा और इसे करने का सबसे अच्छा तरीका है,

<input type="text"
       id="rootFolder"
       ng-init="rootFolders = 'Bob'"
       ng-model="rootFolders"
       disabled="disabled"
       value="Bob"
       size="40"/>

Comments

नियंत्रक के बजाय निर्देश / मार्कअप में इसे अच्छा लगता है।

— random_user_name

Answer 7

यह पहले के उत्तरों के लिए एक मामूली संशोधन है ...

$ परसे की कोई जरूरत नहीं है

angular.directive('input', [function () {
  'use strict';

  var directiveDefinitionObject = {
    restrict: 'E',
    require: '?ngModel',
    link: function postLink(scope, iElement, iAttrs, ngModelController) {
      if (iAttrs.value && ngModelController) {
        ngModelController.$setViewValue(iAttrs.value);
      }
    }
  };

  return directiveDefinitionObject;
}]);

Comments

ध्यान रखें कि ngModelController। $ setViewValue मॉडल स्थिति को गंदे और प्राचीन से गलत में बदल देगा जो फॉर्म स्टेट को भी प्रभावित करेगा जो कुछ समय दर्द हो सकता है।

— अतुल चौधरी

Answer 8

नमस्ते, आप मॉडल के इनिशियलाइज़ेशन के साथ नीचे के तरीकों की कोशिश कर सकते हैं।

यहां आप टेक्स्टबॉक्स के एनजी-मॉडल को दो तरह से शुरू कर सकते हैं

- एनजी-इनिट के उपयोग के साथ

- js में $ स्कोप के उपयोग के साथ

<!doctype html>
 <html >
 <head>
        <title>Angular js initalize with ng-init and scope</title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
</head>
<body ng-app="app" >
    <h3>Initialize value with ng-init</h3>
    <!-- Initlialize model values with ng-init -->
    <div ng-init="user={fullname:'Bhaskar Bhatt',email:'[e-mail]',address:'Ahmedabad'};">
        Name : <input type="text" ng-model="user.fullname" /><br/>
        Email : <input type="text" ng-model="user.email" /><br/>
        Address:<input type="text" ng-model="user.address" /><br/>

    </div>  
    <!-- initialize with js controller scope -->
    <h3>Initialize with js controller</h3>

    <div  ng-controller="alpha">
        Age:<input type="text" name="age" ng-model="user.age" /><br/>
        Experience : <input type="text" name="experience" ng-model="user.exp" /><br/>
        Skills : <input type="text" name="skills" ng-model="user.skills" /><br/>
    </div>  

</body> 
<script type="text/javascript">
        angular.module("app",[])
        .controller("alpha",function($scope){
            $scope.user={};
            $scope.user.age=27;
            $scope.user.exp="4+ years";
            $scope.user.skills="Php,javascript,Jquery,Ajax,Mysql";
        });

     </script>
 </html>                

Answer 9

मुद्दा यह है कि आपको एनजी-मॉडल को मूल तत्व पर सेट करना होगा जहां आप एनजी-मूल्य / मूल्य सेट करना चाहते हैं। जैसा कि कोणीय ने उल्लेख किया है:

यह मुख्य रूप से इनपुट [रेडियो] और विकल्प तत्वों पर उपयोग किया जाता है, ताकि जब तत्व का चयन किया जाता है, तो उस तत्व का एनकोमॉडल (या उसके चुनिंदा मूल तत्व) बाध्य मान पर सेट हो।

जैसे: यह एक निष्पादित कोड है:

<div class="col-xs-12 select-checkbox" >
<label style="width: 18em;" ng-model="vm.settingsObj.MarketPeers">
  <input name="radioClick" type="radio"  ng-click="vm.setPeerGrp('market');" 
         ng-value="vm.settingsObj.MarketPeers" 
         style="position:absolute;margin-left: 9px;">
  <div style="margin-left: 35px;color: #717171e8;border-bottom: 0.5px solid #e2e2e2;padding-bottom: 2%;">Hello World</div>
</label>
</div>

ध्यान दें: इस उपरोक्त मामले में मैंने कहा कि एनजी-मॉडल और मूल्य के लिए JSON की प्रतिक्रिया थी, मैं सिर्फ JS ऑब्जेक्ट के लिए "MarketPeers" के रूप में एक और संपत्ति जोड़ रहा हूं। तो मॉडल और मूल्य आवश्यकता के अनुसार निर्भर हो सकते हैं, लेकिन मुझे लगता है कि यह प्रक्रिया एनजी-मॉडल और मूल्य दोनों को प्राप्त करने में मदद करेगी, लेकिन उन्हें एक ही तत्व पर नहीं होना चाहिए।

Answer 10

मेरा भी ऐसा ही मुद्दा था। मैं value="something"प्रदर्शित करने और संपादित करने के लिए उपयोग करने में सक्षम नहीं था । मुझे अपने अंदर दिए गए कमांड का इस्तेमाल करना होगा, जिसमें <input>विथ एनजी मॉडल को घोषित किया जाएगा।

[(ngModel)]=userDataToPass.pinCode

जहां मेरे पास ऑब्जेक्ट में डेटा की सूची userDataToPassऔर वह आइटम है जिसे मुझे प्रदर्शित करने और संपादित करने की आवश्यकता है pinCode।

उसी के लिए, मैंने इस YouTube वीडियो का उल्लेख किया है

Comments

इस howTo के लिए, ओपी AngularJS का उपयोग कर रहा है, आपका YT वीडियो संदर्भ कोणीय 4 का उपयोग कर रहा है

— 15:22 पर क्रिस 22