Toggle 在 Angular ng-repeat 中无法正常工作

Question

我使用 AngularJS ng-repeat 制作了一个表格（请参阅附加的链接how it looks like）。在第二列（在每个）中，我试图通过单击上面的相应链接来切换一段数据。它有效，但仅适用于表中的奇数行。

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

尝试用以下方式重写

<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 帮助我理解，当我单击第一个链接（例如）时，我的 if-else 对第一个元素执行 n 次（n 等于剩余行的数量，包括初始一）。

这样（从我的控制台复制粘贴）：

*true
    WS Payroll 

false
    WS Payroll 

true
    WS Payroll 

false
    WS Payroll 

true
    WS Payroll 

false
    WS Payroll 

true
    WS Payroll 

false
    WS Payroll* 

因此，剩余次数在“假”(2xn) 上完成，它不会打开。但是，当这条链导致“真实”时，它就起作用了。但无论如何，这不是正确的行为。

但是，当我尝试评论整个 'else' 语句时，脚本会正确执行，每次点击尊重项目时只会执行一次。

有人知道这是怎么发生的吗？非常感谢您的帮助。我是 Angular 新手，所以我真的很依赖你的帮助。

Answer 1

首先，在存在 Angular 的情况下使用 jQuery 操作 DOM 并不被认为是好的做法。 Angular 不是为此而生的。

现在回到你的问题，你可以像下面这样简单地切换，

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

一个隐藏/显示列的小sn-p

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>