AngularJS में सशर्त रूप से विशेषताओं को लागू करने का सबसे अच्छा तरीका क्या है?

Question

मुझे गुंजाइश पर बूलियन चर के आधार पर, तत्वों के लिए "संतोषप्रद" उदाहरण के लिए जोड़ने में सक्षम होने की आवश्यकता है।

उदाहरण का उपयोग करें:

<h1 attrs="{'contenteditable=\"true\"': editMode}">{{content.title}}</h1>

यदि परिणाम के लिए $scope.editModeसेट किया गया था, तो सामग्री में सत्यता = सत्य को जोड़ा जाएगा true। क्या इस एनजी-क्लास को लागू करने का कुछ आसान तरीका है जैसे कि विशेषता व्यवहार? मैं एक निर्देश लिखने और यदि नहीं तो साझा करने पर विचार कर रहा हूं।

संपादित करें: मैं देख सकता हूं कि मेरे प्रस्तावित अटायर निर्देश और एनजी-बाइंड-एटर्स के बीच कुछ समानताएं हैं , लेकिन इसे 1.0.0.rc3 में हटा दिया गया था , ऐसा क्यों?

Comments

मुझे ऐसा कुछ भी नहीं आया है। मैं वोट देता हूँ! : डी शायद इसे कोणीय परियोजना के लिए प्रस्तुत करें। एक वाक्यविन्यास जो एनजी-क्लास से बेहतर मेल खाता है, अच्छा होगा। ng-attr="expression"।

— Xesued

मैं निश्चित रूप से विचार कर रहा हूँ कि हाँ!

— केनेथ लिन

यह वास्तव में ngClass या ngStyle के समान नहीं है क्योंकि वे एक विशेषता को नियंत्रित करते हैं और आप किसी भी विशेषता को नियंत्रित करना चाहते हैं । मुझे लगता है कि contentEditableनिर्देशन करना बेहतर होगा ।

— जोश डेविड मिलर

उस पर @JoshDavidMiller +1। मुझे लगता है कि किसी भी विशेषता को नियंत्रित करने में सक्षम होने के लिए थोड़ा लाभ है, खासकर जटिलता को देखते हुए। आप एक चर पर सशर्त रूप से अभिनय कर सकते हैं।

— उमुर कोंटाकी

<h1 ng-attr-contenteditable="{{editMode && true : false}}">{{content.title}}</h1>

— मिया

Answer 1

मैं निम्न रूप से क्लास अटर को सेट करने के लिए निम्न का उपयोग कर रहा हूं जब एनजी-क्लास का उपयोग नहीं किया जा सकता है (उदाहरण के लिए एसवीजी को स्टाइल करते समय):

ng-attr-class="{{someBoolean && 'class-when-true' || 'class-when-false' }}"

उसी दृष्टिकोण को अन्य विशेषता प्रकारों के लिए काम करना चाहिए।

(मुझे लगता है कि आपको एनजी- attr- का उपयोग करने के लिए नवीनतम अस्थिर कोणीय पर होना चाहिए, मैं वर्तमान में 1.1.4 पर हूं)

Comments

बस इस उत्तर को स्पष्ट करने के लिए: यदि आप किसी भी विशेषता के साथ उपसर्ग करते हैं ng-attr-, तो संकलक उपसर्ग को छीन लेगा, और मूल विशेषता मान से कोणीय अभिव्यक्ति के परिणाम के लिए बाध्य इसके मूल्य के साथ विशेषता को जोड़ देगा ।

— मथियास

मेरी राय में यह पढ़ना आसान है यदि आप एक टर्नरी ऑपरेटर का उपयोग करते हैं, जिसके लिए 1.1.5 में समर्थन जोड़ा गया था। ऐसा लगेगा: {{someConditionalExpression? 'वर्ग-जब-सच': 'वर्ग-जब-झूठ'}}

— १४'१४

इस दृष्टिकोण के साथ समस्या यह है कि परिणाम की परवाह किए बिना विशेषता बनाई जाती है। आदर्श रूप से हम नियंत्रण विकर को पसंद करेंगे या विशेषता बिल्कुल नहीं बनाई जाएगी।

— एयरटोनिक्स

ध्यान दें कि एनजी- attr- सामान को कोणीय 1.2 से हटा दिया गया था। यह ansswer अब मान्य नहीं है।

— जुदा गेब्रियल हिमंगो

तुम गलत हो। यह प्रोजेक्ट github.com/codecapers/AngularJS-FlowChart Angular 1.2 और ng-attr- का उपयोग करता है। इसके अलावा नवीनतम डॉक्स (कोणीय 1.4) में अभी भी एनजी-एट्री शामिल

— एशले डेविस

Answer 2

ng-attrएक कोणीय अभिव्यक्ति को विकसित करने के लिए आप विशेषताओं को उपसर्ग कर सकते हैं । जब अभिव्यक्तियों का परिणाम अपरिभाषित होता है, तो यह विशेषता से मूल्य को हटा देता है।

<a ng-attr-href="{{value || undefined}}">Hello World</a>

उत्पादन होगा (जब मूल्य गलत है)

<a ng-attr-href="{{value || undefined}}" href>Hello World</a>

इसलिए उपयोग न करें falseक्योंकि इससे मूल्य के रूप में "झूठा" शब्द उत्पन्न होगा।

<a ng-attr-href="{{value || false}}" href="false">Hello World</a>

एक निर्देश में इस चाल का उपयोग करते समय। निर्देश के गुणधर्म झूठे होंगे यदि वे एक मूल्य याद कर रहे हैं।

उदाहरण के लिए, उपरोक्त गलत होगा।

function post($scope, $el, $attr) {
      var url = $attr['href'] || false;
      alert(url === false);
}

Comments

मुझे यह उत्तर पसंद है। हालांकि, मुझे नहीं लगता कि अगर मूल्य अपरिभाषित है तो यह विशेषता छिपाएगा। मुझे कुछ याद आ रहा है, हालांकि हो सकता है। तो सबसे पहले परिणाम होगा <a ng-attr-href="{{value || undefined}}" href> नमस्ते विश्व </a>

— रोमन कश्मीर

@RomanK हाय, मैनुअल बताता है कि undefinedएक विशेष मामला है। "एनजीएटर का उपयोग करते समय, $ इंटरपोल के ऑलऑर्नरिंग फ्लैग का उपयोग किया जाता है, इसलिए यदि प्रक्षेपित स्ट्रिंग में कोई भी अभिव्यक्ति अपरिभाषित है, तो विशेषता को हटा दिया जाता है और तत्व में नहीं जोड़ा जाता है।"

— रिएक्टगुलर

किसी भी भविष्य के पाठकों की सहायता के लिए बस एक नोट, 'अपरिभाषित' व्यवहार को एंगुलर 1.3 में जोड़ा गया प्रतीत होता है। मैं 1.2.27 का उपयोग कर रहा हूं और वर्तमान में IE8 होना चाहिए।

— एडम मार्शल

कुछ और पुष्टि करने के लिए कोणीय 1.2.15 मान को अपरिभाषित करने पर भी href प्रदर्शित करेगा, ऐसा लगता है कि उपरोक्त टिप्पणी के अनुसार कोणीय 1.3 में अपरिभाषित व्यवहार शुरू होता है।

— ब्रायन ओग्डेन

यह नोट करना महत्वपूर्ण है कि अगर यह मौजूद है, तो भी यह हमेशा निर्देश को लागू ng-attr-fooकरेगा , यहां तक ​​कि इसका मूल्यांकन भी करता है । चर्चाfoong-attr-fooundefined

— ह्यूजेस

Answer 3

मुझे इस विशेषता को स्थापित करके कड़ी मेहनत करनी पड़ी। और विशेषता के लिए बूलियन मान का उपयोग करके विशेषता प्रयोज्यता को नियंत्रित करना।

यहाँ कोड स्निपेट है:

<div contenteditable="{{ condition ? 'true' : 'false'}}"></div>

आशा है कि ये आपकी मदद करेगा।

Comments

जैसा कि कोणीय IIF अभिव्यक्ति को पार्स कर सकता है यह वर्तमान गुंजाइश में राज्य के मूल्यांकन और उस राज्य के आधार पर मूल्यों को आत्मसात करने के लिए पूरी तरह से काम करता है।

— mccainz

Answer 4

कोणीय (1.1.5) के नवीनतम संस्करण में, उन्होंने एक सशर्त निर्देश शामिल किया है जिसे कहा जाता है ngIf। यह अलग है ngShowऔर ngHideइसमें तत्व छिपे नहीं हैं, लेकिन DOM में शामिल नहीं हैं। वे उन घटकों के लिए बहुत उपयोगी हैं जिन्हें बनाना महंगा है लेकिन उनका उपयोग नहीं किया जाता है:

<h1 ng-if="editMode" contenteditable=true>{{content.title}}</h1>

Comments

मेरा मानना ​​है कि एनजी-अगर केवल एक तत्व स्तर पर काम करता है, अर्थात, आप एक तत्व के सिर्फ एक गुण के लिए एक सशर्त निर्दिष्ट नहीं कर सकते।

— मैक्स स्ट्रेटर

वास्तव में, लेकिन आप तब कर सकते हैं<h1 ng-if="editMode" contenteditable="true"><h1 ng-if="!editMode">

— ByScripts

हालाँकि, खबरदार है कि ng-ifएक नया दायरा बनाता है।

— शिमोन रैचलेंको

@ShimonRachlenko सहमत! यह भ्रम और बग का एक बड़ा स्रोत हो सकता है। ng-ifएक नया दायरा बनाता है, लेकिन ng-showनहीं करता है। यह असंगति मेरे लिए हमेशा एक दुखद घटना रही है। इस के लिए रक्षात्मक प्रोग्रामिंग प्रतिक्रिया है: "हमेशा कुछ इस बात से बंधे कि अभिव्यक्ति में एक डॉट" और यह एक मुद्दा नहीं होगा।

— ब्रायन Genisio

यदि आप एक विशेषता जोड़ना चाहते हैं जो वास्तव में एक निर्देश है, तो यह बहुत अच्छा काम करता है। कोड दोहराव के बारे में शर्म की बात है

— एडम मार्शल

Answer 5

बूलियन चेक के आधार पर एक विशिष्ट मूल्य दिखाने के लिए एक विशेषता प्राप्त करने के लिए, या पूरी तरह से छोड़ा जा सकता है अगर बूलियन चेक विफल हो गया, तो मैंने निम्नलिखित का उपयोग किया:

ng-attr-example="{{params.type == 'test' ? 'itWasTest' : undefined }}"

उदाहरण का उपयोग:

<div ng-attr-class="{{params.type == 'test' ? 'itWasTest' : undefined }}">

के मूल्य के आधार पर उत्पादन <div class="itWasTest">या करेगा<div>params.type

Answer 6

<h1 ng-attr-contenteditable="{{isTrue || undefined }}">{{content.title}}</h1>

उत्पादन होगा जब सही = सही है: <h1 contenteditable="true">{{content.title}}</h1>

और कब है = गलत: <h1>{{content.title}}</h1>

Comments

क्या होगा अगर मैं कुछ चीज़ चाहता हूँ जैसे <h1 contenteditable = "row">

— SuperUberDuper

<h1 ng-attr-contenteditable="{{isTrue ? 'row' : undefined}}">{{content.title}} </h1>

— फतब

यह मुझे स्वीकृत उत्तर होना चाहिए। मेरा परिदृश्य था<video ng-attr-autoplay="{{vm.autoplay || undefined}}" />

— LucasM

Answer 7

स्वीकृत समाधान के बारे में, एशले डेविस द्वारा पोस्ट की गई विधि, वर्णित विधि अभी भी डोम में विशेषता को छापती है, इस तथ्य की परवाह किए बिना कि यह निर्धारित मूल्य अपरिभाषित है।

उदाहरण के लिए, इनपुट क्षेत्र सेटअप पर एनजी-मॉडल और मूल्य विशेषता दोनों के साथ:

<input type="text" name="myInput" data-ng-attr-value="{{myValue}}" data-ng-model="myModel" />

भले ही myValue के पीछे क्या है, मूल्य विशेषता अभी भी डोम में मुद्रित होती है, इस प्रकार, व्याख्या की गई। एनजी-मॉडल तब ओवरराइड हो जाता है।

थोड़ा अप्रिय, लेकिन एनजी का उपयोग करते हुए-अगर चाल है:

<input type="text" name="myInput" data-ng-if="value" data-ng-attr-value="{{myValue}}" data-ng-model="myModel" />
<input type="text" name="myInput" data-ng-if="!value" data-ng-model="myModel" />

मैं एनजी-अगर निर्देशों के अंदर अधिक विस्तृत जांच का उपयोग करने की सलाह दूंगा :)

Comments

इस दृष्टिकोण के साथ, आप हालांकि उसी कोड को दोहरा रहे होंगे।

— कल्याण

सच है, लेकिन यह मॉडल घोषणा को सुरक्षित रखता है। स्वीकृत समाधान का उपयोग करने के साथ मेरी समस्या यह थी कि मूल्य विशेषता DOM में समाप्त हो गई, मॉडल घोषणा पर पूर्वता लेना। इसलिए, यदि मान विशेषता खाली है, लेकिन मॉडल नहीं है, तो मॉडल को खाली मान लेने के लिए ओवरराइड किया जाएगा।

— एलेक्स

Answer 8

इसके अलावा आप इस तरह एक अभिव्यक्ति का उपयोग कर सकते हैं:

<h1 ng-attr-contenteditable="{{ editMode ? true : false }}"></h1>

Answer 9

मैंने वास्तव में कुछ महीने पहले ऐसा करने के लिए एक पैच लिखा था (किसी के बारे में पूछने के बाद # fangodej # freenode में)।

यह शायद विलय नहीं होगा, लेकिन यह ngClass के समान है: https://github.com/angular/angular.js/pull/4269

यह विलय हो जाता है या नहीं, मौजूदा एनजी- attr- * सामान संभवतः आपकी आवश्यकताओं के लिए उपयुक्त है (जैसा कि दूसरों ने उल्लेख किया है), हालांकि यह आपके द्वारा सुझाए जा रहे अधिक एनग्लैक्स-स्टाइल कार्यक्षमता की तुलना में थोड़ा क्लंकियर हो सकता है।

Answer 10

इनपुट क्षेत्र सत्यापन के लिए आप कर सकते हैं:

<input ng-model="discount" type="number" ng-attr-max="{{discountType == '%' ? 100 : undefined}}">

यह विशेषता maxको 100तभी लागू करेगा जब discountTypeइसे परिभाषित किया जाएगा%

Answer 11

संपादित करें : यह उत्तर Angular2 + से संबंधित है! क्षमा करें, मैं टैग से चूक गया!

मूल उत्तर:

जब आप केवल आवेदन करना चाहते हैं (या सेट करना चाहते हैं) एक बहुत ही सरल स्थिति के लिए एक निश्चित इनपुट मान सेट किया गया था, तो यह उतना आसान है

<my-element [conditionalAttr]="optionalValue || false">

यह समान है:

<my-element [conditionalAttr]="optionalValue ? optionalValue : false">

(यदि वैकल्पिक दिया जाता है तो वैकल्पिक विकल्प लागू होता है अन्यथा अभिव्यक्ति झूठी है और विशेषता लागू नहीं होती है।)

उदाहरण: मेरे पास मामला था, जहां मैंने एक रंग लागू किया, लेकिन मनमाने ढंग से शैलियों को भी लागू किया, जहां रंग विशेषता काम नहीं करती थी क्योंकि यह पहले से ही सेट था (भले ही @Input () रंग नहीं दिया गया था):

@Component({
  selector: "rb-icon",
  styleUrls: ["icon.component.scss"],
  template: "<span class="ic-{{icon}}" [style.color]="color==color" [ngStyle]="styleObj" ></span>",
})
export class IconComponent {
   @Input() icon: string;
   @Input() color: string;
   @Input() styles: string;

   private styleObj: object;
...
}

तो, "style.color" केवल तब सेट किया गया था, जब रंग विशेषता थी, अन्यथा "शैलियों" स्ट्रिंग में रंग विशेषता का उपयोग किया जा सकता था।

बेशक, यह भी हासिल किया जा सकता है

[style.color]="color" 

तथा

@Input color: (string | boolean) = false;

Comments

Angular.JS Angular 1 है, जो Angular 2+ से बहुत अलग है। आपका समाधान Angular 2+ के लिए उत्तर देता है, लेकिन AngularJS (1) के लिए कहा गया था।

— ssc-hrep3

@ ssc-hrep3: आप सही कह रहे हैं। क्षमा करें, मुझे याद आया! धन्यवाद। मैंने उस बिंदु का उत्तर संपादित किया। :-)

— जैफॉइड

क्या कोणीय्युलर नहीं है कोणीय, कोणीय 1 कोणीय है

— dgzornoza

Answer 12

बस अगर आपको एंगुलर 2 के लिए समाधान की आवश्यकता है, तो इसके सरल, नीचे की तरह संपत्ति के बंधन का उपयोग करें, उदाहरण के लिए आप इनपुट को केवल सशर्त रूप से पढ़ना चाहते हैं, फिर वर्गाकार ब्रेस में जोड़ते हैं = उसके बाद चिन्ह और अभिव्यक्ति।

<input [readonly]="mode=='VIEW'"> 

Comments

angularjs (कोणीय 1) कोणीय नहीं है (angular2)

— dgzornoza

कोणीय 2+ और कोणीय जेएस समान नहीं हैं, वे पूरी तरह से विभिन्न उत्पादों की तरह हैं।

— संजय सिंह

Answer 13

इस काम में सक्षम था:

ng-attr-aria-current="{{::item.isSelected==true ? 'page' : undefined}}"

यहाँ अच्छी बात यह है कि यदि item.isSelected झूठा है तो विशेषता केवल प्रदान नहीं की जाती है।