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*

因此，剩余的次数完成＆＃39; false＆＃39; （2xn）它没有打开。但是，当这个链条导致真正的＆＃39;有用。但无论如何，这是不正确的行为。

然而，当我试图评论整个＆＃39;否则＆＃39;语句，脚本正确执行，每次点击只对尊重项目执行一次。

有人知道这可能发生的原因吗？非常感谢您的帮助。我是棱角分明的新人，所以我真的很依赖你的帮助。

Answer 1

首先，在Angular存在的情况下使用jQuery操作DOM并不是一种好的做法。 Angular并不意味着这一点。

现在回到你的问题，你可以简单地切换下面的内容，

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

隐藏/显示列的小片段

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

1 个答案: