如何對每個TR元素的彈出窗口子TR NG單擊

我有使用表NG-重複如何對每個TR元素的彈出窗口子TR NG單擊

  <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); 

    }

來源

2016-01-22 Ranjith M

這裏是一個工作版本：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>

來源

2016-01-26 13:32:18 Derlin

其實我想顯示ID爲孩子而不是虛擬數據。感謝TR您的寶貴時間 –

不是一定要了解這個問題，如果你將資源傳遞給childToggle函數，您可以生成動態內容而不是虛擬數據。是不是你試圖實現的？ – Derlin

我想顯示'

i' have to be shown under every tr element when clicks

'而不是那個虛擬數據。那就是我要找的 –

你有沒有想過使用提示的？ 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']; 

});

來源

2016-01-22 07:45:23 Derlin

任何一個有:-( –

如何對每個TR元素的彈出窗口子TR NG單擊

回答

相關問題