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似乎在div元素周围出现了td的问题，并且可能在嵌套和引用时遇到了问题再次$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

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

1 个答案: