Question

我正在尝试制作一个可折叠的表行，嵌套在行的内部是一个表。我的折叠功能有效，因为它允许用户在执行 ctrl.toggle（）时崩溃，但是，我的问题是每一行都折叠而不是特定的一行，我查看了其他博客和Stack Overflow中的帖子，但没有一个对我的问题有帮助。我会感谢任何反馈，因为我是编码新手，我想了解更多。感谢

HTML

<table>
       <thead>
           <tr >
              <th >Host Name</th>
               <th>Status</th>
            </tr>
                  </thead>
                  <tbody>
                  <tr class="hover-pointer accordion-toggle" ng-click="syh.toggle()" ng-repeat-start="value in syh.data" >

                      <td> {{value.host_name}}</td>
                      <td> empty   </td>
                  </tr>
                  <tr ng-repeat-end ng-if="syh.show_details==true" class="slide-toggle-js" >
                      <td colspan="2" >
                          <div ng-if="syh.show_details==true" class="toggle-me" >

                              <table class="table table-bordered table-hover-alt text-center">
                                  <thead>
                                  <tr class="blue-bg">
                                      <th > Service</th>
                                      <th >Status</th>

                                  </thead>
                                  <tbody ng-cloak>
                                  <tr ng-repeat="value in value.service " >
                                      <td>{{value.service}}</td>
                                      <td>{{value.status}}</td>

                                  </tr>
                                  </tbody>
                              </table>

                          </div>
                      </td>
                  </tr>
                  </tbody>
              </table>

JS

  ctrl.toggle = function(){
    if(ctrl.show_details == true){
      ctrl.show_details = false
    }else if (ctrl.show_details == false) {
        ctrl.show_details = true
    }
  }

  ctrl.data =[
    {host_name:'cadsapp-ch2-p7.steel.cloud.comcast.net', service:[{service:'/app partition',status:0},{service:'/app partition',status:0},{service:'/app partition',status:0},{service:'/app partition',status:0}]},
    {host_name:'stuff', service:[{service:'/app',status:0}]},
    {host_name:'stuffing', service:[{service:'/partition',status:0}]}

  ]

Answer 1

您正在使用ng-if="syh.show_details==true"来显示/隐藏每一行。

show_details应该是一个数组，并根据行ID设置为true或false：

<tr ... ng-if="syh.show_details[i]==true" ...>

此外，toggle函数应该有一个参数：

ctrl.toggle = function(i) {
    ctrl.show_details[i] == !ctrl.show_details[i];
}

Angular 1.5折叠表格行

1 个答案: