Toggle does not work correctly inside Angular ng-repeat

Question

I've made a table using AngularJS ng-repeat (see the link attachedhow it looks like). In the second column (in each ) I'm trying to toggle a piece of data with clicking on the respective link above. It works, but only on odd rows in the table.

<tr ng-repeat='service in services | filter:searchText' ng-class="{{service.status}} ? 'success' : 'danger'">
<td class='status-col'><span class='icon' ng-class="{{service.status}} ? 'glyphicon glyphicon-ok' : 'glyphicon glyphicon-remove'"></span></td>
<td>

  <a class='toggle' href="javascript:void(0);">{{service.name}}</a>


  <div>
{{service.stateDesc}} 
  </div>

  <script type="text/javascript">
          $(function() // run after page loads 
          { 
            $(".toggle").click(function() 
            {  
              // hides matched elements if shown, shows if hidden 
              $(this).next().toggle(); 


              return false;
            }); 
          });
  </script>


</td>

Tried to rewrite it in the following way

<script type="text/javascript">
          $(function() // run after page loads 
          { 
            $(".link").click(function() 
            {  
              // hides matched elements if shown, shows if hidden 
              if ($(this).next().attr('ng-show')=='false') {
              $(this).next().attr('ng-show','true');
              $(this).next().removeClass( "ng-hide" );
              console.log('true' + $(this).next().html());
              //return false;
              }

              else if ($(this).next().attr('ng-show')=='true') {
               $(this).next().attr('ng-show','false');
                $(this).next().addClass( "ng-hide" );
                console.log('false'+ $(this).next().html());
              //return false;
              };

              //return false;
            }); 
          });
  </script>

console.log that I inserted helps me to understand that when I click on the first link (for example), my if-else is executed n times for the first element (n is equal to quantity of remaining rows, including initial one).

Like that (copy-paste from my console):

*true
    WS Payroll 

false
    WS Payroll 

true
    WS Payroll 

false
    WS Payroll 

true
    WS Payroll 

false
    WS Payroll 

true
    WS Payroll 

false
    WS Payroll* 

Hence, the remaining number of times finishes on 'false' (2xn) it does not open. But when this chain leads to 'true' it works. But anyway that's not correct behavior.

However, when I try to comment the whole 'else' statement, script is executed correctly, only once on each click for the respect item.

Does anybody has an idea how that might have happened? Many thanks for your help. I am new to angular, so I really rely on your help.

Answer 1

First of all, manipulating DOM with jQuery in presence of Angular is not considered as good practice. Angular is not meant for that.

Now coming back to your question, you can simply do toggle something like below,

 <td>
   <a href="" ng-click="toggle=!toggle">{{service.name}}</a>
  <div>{{service.stateDesc}} </div>
 </td>

A small snippet to hide/show column

var app = angular.module("myapp", []);

app.controller("testCntrl", function($scope) {

})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myapp">
  <div ng-controller="testCntrl">
    <table>
      <tr>
        <th>Emoticons</th>
        <th>Desc</th>
      </tr>
      <tr>
        <td><span ng-show="isSmile">:):):):):):):):)</span>
        </td>
        <td><a href="" ng-click="isSmile=!isSmile">Smile</a>
        </td>
      </tr>
      <tr>
        <td><span ng-show="isSad">:(:(:(:(:(:(:(:(</span>
        </td>
        <td><a href="" ng-click="isSad=!isSad">Sad</a>
        </td>
      </tr>
    </table>



  </div>
</div>