it-swarm.asia

كيف يمكنني استخدام مؤشر $ داخل تكرار ng فئة فئة عرض DIV؟

لدي مجموعة من عناصر <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>

هذا يعمل لأول حالتين.

  • عندما ينقر المستخدم فوق ABC ، ​​يظهر أول <DIV> 100 ويغير اللون إلى الأحمر.
  • عند النقر فوق DEF ، يظهر 101 و DEF يتحول إلى اللون الأحمر.

ومع ذلك ، فهو لا يعمل على الإطلاق بالنسبة إلى A0 و A1 و A2 و A3

  • عندما ينقر المستخدم فوق A0 أو A1 أو A2 أو A3 ، ثم لا يظهر الصحيح ، لا يتم تعيين القيمة المحددة ويتحول لون كل تكرار n0 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 الحالية في الوقت المناسب ويظهر DIV في الوقت المناسب لـ A0 و A1 و A2 و A3 <li> و <DIV>

159
Alan2

المشكلة هنا هي أن 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>

انظر الغطاس

195
noj

كما ذكر johnnyynnoj ng-تكرار يخلق نطاقًا جديدًا. في الحقيقة سأستخدم دالة لتعيين القيمة. انظر الغطاس

JS:

$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>
28
Liviu T.