एक फॉर्म तत्व दिखाने या छिपाने के लिए AngularJS तरीका क्या है?

यह सवाल Tami राइट द्वारा मेलिंग सूची पर कहा गया था ...एक फॉर्म तत्व दिखाने या छिपाने के लिए AngularJS तरीका क्या है?

मैं JQuery से AngularJS दुनिया में आगे बढ़ रहा हूँ और काफी यकीन है कि कैसे एक विशेष उपयोग के मामले जो JQuery में एक नहीं चाहती हैं अनुवाद करने के लिए नहीं कर रहा हूँ। वह उपयोग केस एक ही रूप में किसी चयनित तत्व के परिवर्तन के आधार पर फ़ॉर्म तत्वों को सक्षम/अक्षम या छुपा/दिखा रहा है। कोई भी विचार/सुझाव/पॉइंटर्स कोई भी इस काम को पाने में मेरी सहायता के लिए साझा करने के इच्छुक होगा?

$('#ddl').change(function (e) { 
       var selectedValue = $(this).val(); 
       switch(selectedValue){ 
        case 1: 
         // Hide/show or enable/disable form elements here with Javascript or Jquery 

// Sample enable code 
      document.getElementById("username").readOnly = false; 
      document.getElementById("username").style.background = "transparent"; 
      document.getElementById("username").style.color = "#000000"; 


// Sample disable code 
      document.getElementById("first_name").readOnly = true; 
      document.getElementById("first_name").style.color = "#c0c0c0"; 
            break;   
       } 
       return false; 
      });

अग्रिम धन्यवाद,

Tami राइट

स्रोत

2012-11-08 Pete BD

प्रमुख डिजाइन में से एक:

और मैं क्या यहाँ करने के लिए कोशिश कर रहा हूँ की एक विचार के लिए उदाहरण देकर स्पष्ट करने के लिए कुछ कोड है AngularJS के लक्ष्यों को एप्लिकेशन डेवलपर्स को डीओएम के कम या कोई प्रत्यक्ष हेरफेर के साथ वेब ऐप्स बनाने की अनुमति देना है। कई मामलों में यह प्रोग्रामिंग की एक और अधिक घोषणात्मक शैली की ओर जाता है। यह व्यापार तर्क को आसानी से यूनिट परीक्षण करने की अनुमति देता है और उस दर को बहुत बढ़ा देता है जिस पर आप एप्लिकेशन विकसित कर सकते हैं।

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

AngularJS वास्तव में बहुत आसान है, तो उपयोगकर्ता घटनाओं या डेटा परिवर्तन के आधार पर इनपुट तत्वों का स्वरूप बदलने के लिए बनाता है। यहां एक उदाहरण दिया गया है कि ऊपर की समस्या कैसे प्राप्त की जा सकती है।

यहाँ काम कर डेमो है: http://plnkr.co/edit/zmMcan?p=preview

<html ng-app> 
<head> 
    ... 
    <style type="text/css"> 
    .disabled { 
     color: #c0c0c0; 
     background: transparent; 
    } 
    </style> 
</head> 
<body ng-init="isEnabled=true"> 

    <select ng-model="isEnabled" ng-options="choice == 'Enabled' as choice for choice in ['Enabled', 'Disabled']"></select><br> 

    User Name: <input ng-model="userName" ng-readonly="!isEnabled" ng-class="{ disabled: !isEnabled }"><br> 
    First Name: <input ng-model="firstName" ng-readonly="!isEnabled" ng-class="{ disabled: !isEnabled }"> 
</body>

आप देख सकते हैं कि बजाय जरूरी कोड लिखने, हम की घोषणा करने में सक्षम हैं कि वर्ग और इनपुट के केवल पढ़ने के लिए विशेषताओं के मूल्य के लिए बाध्य कर रहे हैं चुनते हैं। यदि आप कामना करते हैं तो इसे नियंत्रक में मानों की जटिल गणना के साथ बढ़ाया जा सकता है।

स्रोत

2012-11-08 11:24:55

+1। एसओ पर सवाल का जवाब देने के अपने प्रयास की सराहना करें। – SunnyShah

मैं भी कोणीय प्रलेखन https://docs.angularjs.org/api/ng/directive/ngHide – Skary

में राज्य के रूप में एनजी-हाइड या एनजी शो के उपयोग का सुझाव मैं अपने उदाहरण और स्पष्टीकरण चाहते हैं। क्या आपको नहीं लगता कि हम फिर से एक तरह के आधुनिक "घुसपैठ जावास्क्रिप्ट" पर वापस जा रहे हैं? –

AngularJS आधिकारिक दस्तावेज से directives पर:

निर्देशों एचटीएमएल नए गुर सिखाने के लिए एक तरीका है। डीओएम संकलन निर्देशों के दौरान एचटीएमएल के खिलाफ मिलान किया जाता है और निष्पादित किया जाता है। यह निर्देशों को पंजीकरण करने, या डीओएम को बदलने के निर्देशों की अनुमति देता है।

कोणीय निर्देश हैं जो वेब अनुप्रयोग बनाने के लिए उपयोगी होते हैं लेकिन इस तरह के लिए बढ़ाया जा सकता है कि HTML एक कथात्मक डोमेन विशिष्ट भाषा (डीएसएल) में बदल सकता है के सेट में एक निर्मित साथ आता है।

इनपुट सक्षम/अक्षम करने के लिए, AngularJS तरीके में सबसे आसान तरीका निम्नलिखित ngDisabled निर्देश का उपयोग करना है। तत्वों को दिखाने/छिपाने के लिए, निम्नलिखित ngShow और ngHide निर्देशों का उपयोग करें

AngularJS इन सभी के लिए अच्छे उदाहरण हैं।

स्रोत

2013-01-13 21:37:28 Guy

एक फॉर्म तत्व दिखाने या छिपाने के लिए AngularJS तरीका क्या है?

उत्तर

संबंधित मुद्दे