AngularJS टेम्प्लेट में टर्नरी ऑपरेटर

Question

आप AngularJS (टेम्प्लेट में) के साथ एक टर्नरी कैसे करते हैं?

नियंत्रक के एक फंक्शन को बनाने और कॉल करने के बजाय html विशेषताओं (कक्षाओं और शैली) में कुछ का उपयोग करना अच्छा होगा।

Answer 1

अद्यतन : कोणीय 1.1.5 ने एक टर्नरी ऑपरेटर जोड़ा , इसलिए अब हम बस लिख सकते हैं

<li ng-class="$first ? 'firstRow' : 'nonFirstRow'">

---

यदि आप कोणीय के पुराने संस्करण का उपयोग कर रहे हैं, तो आपके दो विकल्प हैं:

1. (condition && result_if_true || !condition && result_if_false)
2. {true: 'result_if_true', false: 'result_if_false'}[condition]

आइटम 2. ऊपर दो गुणों के साथ एक वस्तु बनाता है। सरणी सिंटैक्स का उपयोग या तो नाम के साथ संपत्ति का चयन करने के लिए किया जाता है या नाम के साथ संपत्ति गलत है, और संबंधित मूल्य वापस लौटाता है।

उदाहरण के लिए,

<li class="{{{true: 'myClass1 myClass2', false: ''}[$first]}}">...</li>
 or
<li ng-class="{true: 'myClass1 myClass2', false: ''}[$first]">...</li>

$ पहले को पहले तत्व के लिए एनजी-रिपीट के अंदर सही करने के लिए सेट किया गया है, इसलिए उपरोक्त वर्ग 'myClass1' और 'myClass2' को लूप के माध्यम से पहली बार लागू करेगा।

एनजी-क्लास के साथ हालांकि एक आसान तरीका है: एनजी-क्लास एक अभिव्यक्ति लेता है जिसे निम्नलिखित में से एक का मूल्यांकन करना चाहिए:

1. अंतरिक्ष-सीमांकित वर्ग नामों की एक स्ट्रिंग
2. श्रेणी नामों की एक सरणी
3. बुलियन मूल्यों के लिए वर्ग के नाम का एक नक्शा / वस्तु।

1 का उदाहरण) ऊपर दिया गया था। यहाँ 3 का एक उदाहरण है, जो मुझे लगता है कि बहुत बेहतर पढ़ता है:

 <li ng-class="{myClass: $first, anotherClass: $index == 2}">...</li>

एनजी-रिपीट लूप के माध्यम से पहली बार, क्लास मायक्लास को जोड़ा जाता है। के माध्यम से तीसरी बार ($ इंडेक्स 0 पर शुरू होता है), क्लास में एक और क्लाक जोड़ा जाता है।

एनजी-स्टाइल एक अभिव्यक्ति लेता है जो सीएसएस शैली के नाम के नक्शे / ऑब्जेक्ट का सीएसएस मूल्यों के लिए मूल्यांकन करना चाहिए। उदाहरण के लिए,

 <li ng-style="{true: {color: 'red'}, false: {}}[$first]">...</li>

Comments

अगर मैं सवाल अपडेट करने के लिए आपको फिर से उकसाऊं!

— नरेट्ज़

मैं इसका ध्यान रखूँगा, @Narretz

— इयान हंटर

ऑब्जेक्ट-कुंजी एक्सेस करने के उदाहरण में, आप 'झूठी' कुंजी को छोड़ सकते हैं क्योंकि यह वैसे भी खाली स्ट्रिंग है।

— 0xc0de

चेतावनी का शब्द, 1.1.5 वर्तमान में स्थिर नहीं है।

— एडम ग्रांट

यदि आपका मॉडल अपडेट किया जाता है तो सशर्त क्या बदल जाता है? मैं ng-styleअपडेट करना चाहूंगा , लेकिन यह केवल तब मूल्यांकन किया जाना चाहिए जब तत्व पहले प्रदान किया गया हो। (यहां कोणीय नोब)

— हार्टले ब्रॉडी

Answer 2

अद्यतन: कोणीय 1.1.5 ने एक टर्नरी ऑपरेटर जोड़ा, यह उत्तर केवल 1.1.5 से पहले के संस्करणों के लिए सही है। 1.1.5 और बाद के लिए, वर्तमान में स्वीकृत उत्तर देखें।

कोणीय 1.1.5 से पहले:

कोणीयज में एक टर्नरी का रूप है:

((condition) && (answer if true) || (answer if false))

एक उदाहरण होगा:

<ul class="nav">
    <li>
        <a   href="#/page1" style="{{$location.path()=='/page2' && 'color:#fff;' || 'color:#000;'}}">Goals</a>
    </li>
    <li>
        <a   href="#/page2" style="{{$location.path()=='/page2' && 'color:#fff;' || 'color:#000;'}}">Groups</a>
    </li>
</ul>

या:

 <li  ng-disabled="currentPage == 0" ng-click="currentPage=0"  class="{{(currentPage == 0) && 'disabled' || ''}}"><a> << </a></li>

Comments

अजीब। यह बहुत सहज नहीं है। मुझे आश्चर्य है कि इसे इस तरह क्यों लागू किया गया।

— बेन लेश

टर्नरी को कभी लागू नहीं किया गया था, लेकिन यह केवल द्विआधारी ऑपरेटरों के काम करने के तरीके का उपयोग कर रहा है।

— एंड्रयू जोसलिन

@ पत्थर, एंगुलरजेएस परीक्षण क्षमता को बढ़ावा देता है। टेम्प्लेट में कोई तर्क नहीं होना चाहिए। एक टेम्पररी ऑपरेटर को टेम्प्लेट में बेहतर परीक्षण के लिए नियंत्रक को एक फ़ंक्शन कॉल के लिए वापस भेजा जाना चाहिए।

— मार्सेल्लो नुसियो

@ arg20 आपको ngClass निर्देश (या ngClassEven और ngClassOdd) का उपयोग करना चाहिए । फिर नियंत्रक में सीएसएस वर्गों को चुनने के लिए सभी तर्क रखें। यह स्वचालित रूप से परीक्षण करने के लिए बहुत अधिक आसान है।

— मार्सेलो नुकोइओ

@ arg20 मैंने इसे कंट्रोलर में डालने के लिए कहा था, मॉडल में नहीं। यह कोई समस्या नहीं होनी चाहिए। हालाँकि, दस्तावेज़ीकरण कहता है: "मूल्यांकन का परिणाम अंतरिक्ष सीमांकित वर्ग नामों, एक सरणी, या बूलियन मानों के वर्ग नामों का मानचित्र" का प्रतिनिधित्व करने वाला एक स्ट्रिंग हो सकता है। मतलब यह है कि आप "{cssclass: someBoolCheck ()}" का उपयोग अभिव्यक्ति के रूप में कर सकते हैं, यानी आप दृश्य में सीएसएस वर्ग, और नियंत्रक में तर्क डाल सकते हैं। देखो इस jsFiddle एक उदाहरण के लिए।

— मार्सेल्लो नुकोइओ

Answer 3

कोणीय टेम्प्लेट में ग्रंथों के लिए ( userType$ स्कोप की संपत्ति है, जैसे $ स्कोप ।userType):

<span>
  {{userType=='admin' ? 'Edit' : 'Show'}}
</span>

Answer 4

अब तक हम सभी को पता चला कि संस्करण 1.1.5$parse फ़ंक्शन में एक उचित टर्नरी के साथ आता है इसलिए फ़िल्टर के उदाहरण के रूप में बस इस उत्तर का उपयोग करें:

angular.module('myApp.filters', [])

  .filter('conditional', function() {
    return function(condition, ifTrue, ifFalse) {
      return condition ? ifTrue : ifFalse;
    };
  });

और फिर इसका उपयोग करें

<i ng-class="checked | conditional:'icon-check':'icon-check-empty'"></i>

Comments

मुझे यह सवाल टेनेरी ऑपरेटर के लिए आया था लेकिन अंत में मैं एक फ़िल्टर के साथ गया और यह वास्तव में अच्छा लगा ... = D

— slacktracer

Answer 5

वहाँ यह है: ternary ऑपरेटर को 1.1.5 में कोणीय पार्सर में जोड़ा गया ! चैंज देखें

यहाँ एनजी-क्लास निर्देशन में उपयोग किया जाने वाला नया टर्नरी ऑपरेटर दिखाया गया है।

ng-class="boolForTernary ? 'blue' : 'red'"

Answer 6

यद्यपि आप condition && if-true-part || if-false-partकोणीय के पुराने संस्करणों में -syntax का उपयोग कर सकते हैं, सामान्य त्रैमासिक ऑपरेटर कोणीय 1.1.5 और बादcondition ? true-part : false-part में उपलब्ध है ।

Answer 7

  <body ng-app="app">
  <button type="button" ng-click="showme==true ? !showme :showme;message='Cancel Quiz'"  class="btn btn-default">{{showme==true ? 'Cancel Quiz': 'Take a Quiz'}}</button>
    <div ng-show="showme" class="panel panel-primary col-sm-4" style="margin-left:250px;">
      <div class="panel-heading">Take Quiz</div>
      <div class="form-group col-sm-8 form-inline" style="margin-top: 30px;margin-bottom: 30px;">

        <button type="button" class="btn btn-default">Start Quiz</button>
      </div>
    </div>
  </body>

बटन टॉगल करें और बटन का हेडर बदलें और डिव पैनल को दिखाएँ / छिपाएँ। प्लंकर को देखें