使用动态数据展开/折叠行信息

Question

我正在开发 angularjs 应用程序。我想在单击表格行中的图像时展开/折叠表格行并显示更多动态信息。

请找到演示：http://next.plnkr.co/edit/LjVTnKjaLdnYojqV?preview

当点击行上的勾号时，我想显示该行的更多详细信息。目前在我上面的演示中，单击图像时它正在展开行或折叠，但问题是它没有在展开的行中显示动态数据信息（新显示的行）。

样本：

<table ng-table="tableParams" class="table table-condensed table-bordered table-striped">
    <tbody ng-repeat="row in $data">
    <tr ng-click="show()">
      <td>
            <a class="btn btn-link" ng-init="toggle[$index] = false" ng-click="toggle[$index] = !toggle[$index]">
              <span class="glyphicon glyphicon-ok" ng-if="!toggle[$index]"></span>
              <span class="glyphicon glyphicon-bed" ng-if="toggle[$index]"></span>
            </a>
          </td>

      <td data-title="'Name'">{{row.name}}</td>
      <td data-title="'Age'">{{row.age}}</td>
      <td data-title="'SID'">{{row.sid}}</td>
    </tr> 
    <tr ng-if="toggle[$index]">
      <div ng-table="tableParams2" ng-repeat="row in $data">
          <td> {{$index}}</td>
          <td> {{product}}</td>
           <td> {{month}} </td>
            <td> {{pid}}</td>
      </div>
    </tr>
    </tbody>
  </table> 

js代码：

app.controller('MainCtrl', function($scope, NgTableParams) {

$scope.show = function(){
  alert("show/hide");
  var data = [{product: "TV", month: 5,pid:"11"},
              {product: "mobile", age: 4,pid:"22"},
              {product: "desktop", age: 7,pid:"33"}];
   $scope.tableParams2 = new NgTableParams({}, { dataset: data});
}

var data = [{name: "Moroni", age: 50,sid:"12PAX"},
              {name: "Tiancum", age: 43,sid:"12PAX"},
              {name: "Jacob", age: 27,sid:"12PAX"},
              {name: "Nephi", age: 29,sid:"12PAX"},
              {name: "Enos", age: 34,sid:"12PAX"},
              {name: "Tiancum", age: 43,sid:"12PAX"},
              {name: "Jacob", age: 27,sid:"12PAX"},
              {name: "Nephi", age: 29,sid:"12PAX"},
              {name: "Enos", age: 34,sid:"12PAX"},
              {name: "Tiancum", age: 43,sid:"12PAX"},
              {name: "Jacob", age: 27,sid:"12PAX"},
              {name: "Nephi", age: 29,sid:"12PAX"},
              {name: "Enos", age: 34,sid:"12PAX"},
              {name: "Tiancum", age: 43,sid:"12PAX"},
              {name: "Jacob", age: 27,sid:"12PAX"},
              {name: "Nephi", age: 29,sid:"12PAX"},
              {name: "Enos", age: 34,sid:"12PAX"}];

$scope.tableParams = new NgTableParams({}, { dataset: data});  
});

Answer 1

我更改为以下内容，无法确定，但似乎 ng-table 在 td 元素周围的 div 存在问题，并且可能在嵌套和再次引用 $data 时遇到问题?也许有人可以用更多的知识发表评论。

.js

$scope.show = function(){
  alert("show/hide");
  $scope.tableParams2 = [{product: "TV", month: 5,pid:"11"},
              {product: "mobile", age: 4,pid:"22"},
              {product: "desktop", age: 7,pid:"33"}];
}

.html

<tr ng-if="toggle[$parent.$index]"ng-repeat="row in tableParams2">
      <td> {{$index}}</td>
      <td> {{row.product}}</td>
       <td> {{row.month}} </td>
        <td> {{row.pid}}</td>
</tr>

My updated Plunker