एक वर्ग को सक्षम करने और एक DIV दिखाने के लिए मैं एनजी-रिपीट के अंदर $ इंडेक्स का उपयोग कैसे कर सकता हूं?

166

मेरे पास <li>तत्वों का एक सेट है ।

<ul>
  <li ng-class="{current: selected == 100}">
     <a href ng:click="selected=100">ABC</a>
  </li>
  <li ng-class="{current: selected == 101}">
     <a href ng:click="selected=101">DEF</a>
  </li>
  <li ng-class="{current: selected == $index }" 
      ng-repeat="x in [4,5,6,7]">
     <a href ng:click="selected=$index">A{{$index}}</a>
  </li>
</ul>

जब कोई उपयोगकर्ता ऊपर दिए गए किसी एक पता तत्व पर क्लिक करता है, तो उसे, चयनित का मान सेट करना चाहिए और <DIV>नीचे दिए गए तत्वों में से एक दिखाना चाहिए :

<div  ng:show="selected == 100">100</div>
<div  ng:show="selected == 101">101</div>
<div ng-repeat="x in [4,5,6,7]" ng:show="selected == $index">{{ $index }}</div>

यह पहले दो मामलों के लिए काम करता है।

जब उपयोगकर्ता एबीसी पर क्लिक करता है तो पहले <DIV>100 दिखाता है और लाल रंग में रंग बदलता है।
जब DEF पर क्लिक किया जाता है तो 101 शो और DEF लाल रंग में बदल जाते हैं।

हालाँकि यह A0, A1, A2 और A3 के लिए बिल्कुल काम नहीं करता है

जब कोई उपयोगकर्ता A0, A1, A2 या A3 पर क्लिक करता है तो सही नहीं दिखाता है, चयनित मान सेट नहीं होता है और सभी एनजी-रिपीट A0, A1, A2 और A3 का रंग लाल हो जाता है।

यदि आप इस प्लंकर को देखते हैं तो यह सबसे अच्छा दिखाया गया है:

http://plnkr.co/edit/7HMeObplaBkx5R0SntjY?p=preview

ध्यान दें कि मैंने शीर्ष पर {{ selected }}डीबग सहायता के रूप में जोड़ा है । इसके अलावा x in [4,5,6,7]सिर्फ एक पाश अनुकरण करने के लिए हैं। वास्तविक जीवन में मेरे पास यह है ng-repeat="answer in modal.data.answers"।

क्या किसी को पता है कि कैसे मैं तो यह निर्धारित कर सकते हैं करता है उस liवर्ग वर्तमान सही समय पर की स्थापना की और है DIVA0, A1, A2 और A3 के लिए सही समय पर पता चलता है <li>और<DIV>

angularjs

— Alan2
स्रोत

201

यहाँ मुद्दा यह है कि ng-repeatअपना स्वयं का दायरा बनाता है, इसलिए जब आप ऐसा करते हैं तो मौजूदा दायरे को बदलने के बजाय उस दायरे में selected=$indexएक नई selectedसंपत्ति बनाता है । इसे ठीक करने के लिए आपके पास दो विकल्प हैं:

चयनित संपत्ति को एक गैर-आदिम (यानी ऑब्जेक्ट या सरणी में बदलें, जो जावास्क्रिप्ट को प्रोटोटाइप श्रृंखला को देखता है) फिर उस पर एक मूल्य निर्धारित करें:

$scope.selected = {value: 0};

<a ng-click="selected.value = $index">A{{$index}}</a>

प्लंकर देखें

या

$parentसही संपत्ति तक पहुंचने के लिए चर का उपयोग करें। हालांकि इसकी सिफारिश कम है क्योंकि यह स्कोप के बीच युग्मन को बढ़ाता है

<a ng-click="$parent.selected = $index">A{{$index}}</a>

प्लंकर देखें

— Noj
स्रोत

2

वे समस्या के लिए दो अलग-अलग दृष्टिकोण हैं। विचार यह था कि आप किसके साथ जाना चाहते हैं।

— नोज जूल

29

जैसा कि johnnyynnoj एनजी-रिपीट ने एक नया स्कोप बनाया है। मैं वास्तव में मान सेट करने के लिए एक फ़ंक्शन का उपयोग करूंगा। प्लंकर देखें

जेएस :

$scope.setSelected = function(selected) {
  $scope.selected = selected;
}

HTML :

{{ selected }}

<ul>
  <li ng-class="{current: selected == 100}">
     <a href ng:click="setSelected(100)">ABC</a>
  </li>
  <li ng-class="{current: selected == 101}">
     <a href ng:click="setSelected(101)">DEF</a>
  </li>
  <li ng-class="{current: selected == $index }" 
      ng-repeat="x in [4,5,6,7]">
     <a href ng:click="setSelected($index)">A{{$index}}</a>
  </li>
</ul>

<div  
  ng:show="selected == 100">
  100        
</div>
<div  
  ng:show="selected == 101">
  101        
</div>
<div ng-repeat="x in [4,5,6,7]" 
  ng:show="selected == $index">
  {{ $index }}        
</div>

— लिविउ टी।
स्रोत

1

ng:clickवास्तव में काम करता है ? मैंने सोचा कि यह थाng-click

— एडम एफ