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

Question

我使用 AngularJS ng-repeat 制作了一个 table（请参阅附件 linkhow it looks like）。在第二列（每个）中，我试图通过单击上面的相应 link 来切换一条数据。它有效，但仅适用于 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>

尝试用下面的方式改写

<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 帮助我理解当我点击第一个 link （例如）时，我的 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*

因此，剩余的次数在'false'（2xn）结束时没有打开。但是当这条链通向 'true' 时，它就起作用了。但无论如何，这不是正确的行为。

但是，当我尝试对整个 'else' 语句进行注释时，脚本会正确执行，每次单击相关项时只会执行一次。

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

Answer 1

首先，在 Angular 存在的情况下用 jQuery 操纵 DOM 不被认为是好的做法。 Angular 不是那个意思。

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

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

hide/show 列的一小段

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>

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

Toggle does not work correctly inside Angular ng-repeat

css

jquery

twitter-bootstrap

angularjs

ng-repeat