(AngularJS) Make a "ng-show" true specifically for one element in a ng-repeat

Question

I'am begining in Angular, and i'am asking if is it possible to make a "ng-show" true for one element in a "ng-repeat", and make it false for others?

I explain myself with this code:

html file :

      <tbody ng-repeat="elem in List"  ng-init="visible = false">
                    <tr ng-class="elemSelected(elem)">
                        <td colspan="3">
                            <a href ng-click="clickElemScroll(Elem)"   >
                            <span class="glyphicon" ng-class="visible? 'glyphicon-chevron-down' : 'glyphicon-chevron-right'"></span>
                            <strong>{{elem.name}} </strong>
                            </a>
                        </td>
                    </tr>
                    <tr ng-show="visible" >
                      blabla
                    </tr>
</tbody>

js file :

  $scope.clickElemScroll = function (elem) {
                    if ($scope.elemSelected === elem) {
                        $scope.visible = true
                    } 
                };

As you know, the issue is all the elem will be scrolled, how to make only the element which I click visible ?

Answer 1

You can set a new property onto the element to use in the ngRepeat. Also, not sure what is going on with ng-class but I don't recommend using a function in there. If you are trying to set a class when selected, try something like ng-class="{'selected': elem.selected}"

  <tbody ng-repeat="elem in List">
        <tr ng-class="elemSelected(elem)">
             <td colspan="3">
                  <a href ng-click="elem.selected = !elem.selected">
                     <span class="glyphicon" ng-class="visible? 'glyphicon-chevron-down' : 'glyphicon-chevron-right'"></span>
                        <strong>{{elem.name}} </strong>
                  </a>
             </td>
        </tr>
        <tr ng-show="elem.selected">
             blabla
        </tr>