ক্লাস সক্ষম করতে এবং ডিআইভি দেখানোর জন্য আমি কীভাবে এনজি-রিপিটের ভিতরে $ সূচকটি ব্যবহার করতে পারি?

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 দেখায় এবং রঙকে লাল করে to
যখন ডিএইফ ক্লিক করা হয় তখন 101 শো এবং ডিএইফ লাল রঙে পরিবর্তিত হয়।

তবে এটি 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

তারা সমস্যার দুটি পৃথক পদ্ধতি। ধারণাটি ছিল আপনি যা পছন্দ করেন তার সাথে যেতে পারেন।

— noj

29

জননিয়নোজ যেমন উল্লেখ করেছেন এনজি-রিপিট একটি নতুন সুযোগ তৈরি করে। আমি প্রকৃতপক্ষে মান নির্ধারণের জন্য একটি ফাংশন ব্যবহার করব। নিমজ্জনকারী দেখুন

জেএস :

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

এইচটিএমএল :

{{ 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

— অ্যাডাম এফ