Question

我有一张使用ng-repeat

的表格

          <table>
                <thead>
                    <tr>
                        <th>Assets</th>
                        <th>Location</th>
                        <th>Size</th>
                        <th>Price</th>
                        <th>Actions</th>                        
                    </tr>
                </thead>
                <tbody>
                    <tr  id="parent" data-ng-repeat="assets in vm.employees"
                         data-toggle="collapse" id="row{{$index}}" data-target=".row{{$index}}">

                        <td class="name">
                            <i class="mdi mdi-plus s16" ng-click="childRowToggle($event)"></i>
                            {{assets.name}}
                            <span class="secondary-text">{{assets.code}}</span>
                        </td>
                        <td>{{assets.location}}</td>
                        <td>{{assets.size}}</td>
                        <td>{{assets.price}}</td>

                    </tr>
                    <tr id="child" data-ng-repeat="assets in vm.employees" class="collapse row{{$index}}">
                        <div>i' have to be shown under every tr element when clicks
                    </tr>
                </tbody> 
           </table>

如果我点击父tr中的i元素，我希望子tr在该tr元素下弹出。我已经尝试过类似的东西了

 $scope.childRowToggle =  function($event){
     $('#childrow').remove();
           var $this  = $($event.target);
           var $obj =$this.parent().parent();
           console.log($obj.attr('class'));
           $("<tr id='childrow'><td colspan='5'>Dummy Data</td></tr>").insertAfter($obj);

     }

Answer 1

这是一个有效的版本：https://jsfiddle.net/Shitsu/c6bj75mp/。

angular.module('myApp', []).controller('Ctrl',

  function($scope) {
    $scope.employees = [{
      name: "lala",
      location: "loc",
      size: 10,
      price: 44
    }, {
      name: "lala",
      location: "loc",
      size: 10,
      price: 44
    }, {
      name: "lala",
      location: "loc",
      size: 10,
      price: 44
    }, {
      name: "lala",
      location: "loc",
      size: 10,
      price: 44
    }, {
      name: "lala",
      location: "loc",
      size: 10,
      price: 44
    }];


  });

.noPadding {
  padding: 0 !important;
}

td p {
  padding: 10px;
  margin: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<div ng-app="myApp" ng-controller="Ctrl">
  <table class="table table-condensed" style="border-collapse:collapse;">
    <thead>
      <tr>
        <th>Assets</th>
        <th>Location</th>
        <th>Size</th>
        <th>Price</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat-start="assets in employees track by $index" data-toggle="collapse" data-target="#row-{{$index}}" class="accordion-toggle">
        <td class="name">
          <i class="mdi mdi-plus s16">{{assets.name}}</i>
          <span class="secondary-text">{{assets.code}}</span>
        </td>
        <td>{{assets.location}}</td>
        <td>{{assets.size}}</td>
        <td>{{assets.price}}</td>

      </tr>
      <tr ng-repeat-end>
        <td colspan="5" class="noPadding">
          <div class="accordian-body collapse collapsible" id="row-{{$index}}">
            <p>
              Collapsed datas
            </p>
          </div>
        </td>
      </tr>

    </tbody>
  </table>
</div>

Answer 2

您是否考虑过使用工具提示？ UI-Bootstrap有非常好的工具提示，可以完全按照你的意愿行事。您可以选择是否在悬停或单击时触发工具提示。看看这个fiddle。

HTML：

<!doctype html>
<html ng-app="App">

  <body ng-controller="Ctrl">
    <table>
      <tr ng-repeat="a in assets">
        <td tooltip-html-unsafe="{{a}}<br />blabla" tooltip-placement="bottom">{{a}}</td>
      </tr>
    </table>
  </body>

</html>

JS：

angular.module('App', ['ui.bootstrap'])
  .controller('Ctrl', function($scope) {

   $scope.assets = ['a', 'b', 'c'];

});

如何在ng-click上为每个tr元素设置一个弹出子tr

2 个答案: