Search code examples
angularjsangularjs-scope

angularjs pass index through directive

I need help with this code.

<ul ng-init="round = 'round'">
  <li ng-repeat="mesa in mesas" ng-click="selected($index)">
    <div id="{{round}}">&nbsp;</div>
    MESA {{mesa}}
   </li>
 </ul>


$scope.selected = function ($index){
    $scope.index.round = 'round1';
  }

I need that only the li that is being clicked to change the css name, but instead it change all of the li's that I have listed.

Solution

  • You're initializing the variable round outside of the repeat loop, so the expression {{round}} will always point to that singular, shared variable. If you update it once, it updates for all children of the ng-repeat.

    If I understand your question, you're trying to change the CSS class for the div inside the repeat, correct? What you can do in that case is store the selected index on the controller's scope, and check that value against the index inside the loop

    <ul>
  <li ng-repeat="mesa in mesas" ng-click="select($index)">
    <div class="round1" ng-if="selectedIndex === $index">&nbsp;</div>
    <div class="round" ng-if="selectedIndex !== $index">&nbsp;</div>
    MESA {{mesa}}
  </li>
</ul>


$scope.select = function ($index){
  $scope.selectedIndex = $index;
}

    You could also use ng-class instead of ng-if depending on how your CSS is structured, but the idea is the same.