如何使用Angualrjs創建摺疊表

我想用引導創建一個Angularjs摺疊表，並且我發現這一個Twitter Bootstrap Use collapse.js on table cells [Almost Done]的確幫助了我，尤其是使用Angualrjs方法的最後一條評論。如何使用Angualrjs創建摺疊表

但是，我發現這種方法不適用於我的iPhone Safari瀏覽器，但適用於Android手機。我無法弄清楚原因。以上是來自上述帖子的示例鏈接http://jsfiddle.net/ADukg/6880/。

<div ng-controller="UserCtrl"> 
<h3>Click row to revel last name!</h3> 
<table class="table table-condensed"> 
    <thead> 
     <td>First Name</td> 
    </thead> 

    <tbody ng-repeat="user in users" on-finish-render> 
     <tr data-toggle="collapse" data-target="#{{user.id}}"> 
      <td>{{user.firstName}}</td> 
     </tr> 
     <tr> 
      <td class="hiddenRow"> 
       <div id="{{user.id}}" class="collapse"> 
        <h4>{{user.lastName}}</h4> 
       </div> 
      </td> 
     </tr> 
    </tbody> 
</table>

來源

2016-07-29 Wayne Li

試試這個

<div ng-controller="UserCtrl"> 
<h3>Click row to revel last name!</h3> 
<table class="table table-condensed"> 
    <thead> 
     <td>First Name</td> 
    </thead> 

    <tbody ng-repeat="user in users" on-finish-render> 
     <tr> 
      <td><a data-toggle="collapse" data-ng-href="#{{user.id}}" data-target="#{{user.id}}">{{user.firstName}}</a></td> 
     </tr> 
     <tr> 
      <td class="hiddenRow"> 
       <div id="{{user.id}}" class="collapse"> 
        <h4>{{user.lastName}}</h4> 
       </div> 
      </td> 
     </tr> 
    </tbody> 
</table>

見：bootstrap 3 accordion collapse does not work on iphone

來源

2016-07-29 14:02:52

謝謝你回答，但它仍然不適用於我 –

我認爲你應該使用ng-repeat-start和ng-repeat-end。本地angularjs指令

檢查此鏈接https://www.undefinednull.com/2015/04/10/repeating-multiple-elements-using-ng-repeat-start-and-ng-repeat-end-in-angularjs/

此外，檢查這http://johnculviner.com/expandable-collapsable-detail-in-a-table-with-angular-js/

樣品

// Code goes here 
 

 
var app = angular.module('myApp', []); 
 

 
app.controller('mainCtrl', function($scope) { 
 
    $scope.people = [{ 
 
    name: "Bob", 
 
    gender: "Male", 
 
    details: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis nisi quis mi tincidunt luctus ut quis nunc. Nam non risus tincidunt risus sodales condimentum. Morbi sed gravida elit. Nunc a turpis vestibulum elit posuere blandit. Phasellus luctus lectus non porta auctor. Etiam pellentesque imperdiet posuere. Nullam adipiscing congue nisl, in vulputate odio ornare ac." 
 
    }, { 
 
    name: "Jane", 
 
    gender: "Female", 
 
    details: "Maecenas quis sodales lectus, vitae convallis ipsum. Ut ac viverra tellus. Quisque vulputate, orci placerat eleifend scelerisque, eros nunc rutrum odio, pharetra mattis leo neque vel eros. Cras id purus nec lorem vehicula rutrum a vel arcu. Quisque eget euismod augue. Integer volutpat auctor lorem, quis lacinia nisl tempus nec. Nunc fringilla, odio eget molestie varius, tortor turpis dignissim lacus, sed varius nunc velit eu turpis. Etiam sed congue diam. In ornare elit nec dolor faucibus ornare. Ut eget erat vel elit tristique iaculis. Maecenas et semper lorem. Nam mollis ante et ipsum vestibulum posuere. Ut non purus non risus tempor vulputate et vitae ipsum. Mauris et sem sit amet quam pulvinar fringilla." 
 
    }, { 
 
    name: "Bill", 
 
    gender: "Male", 
 
    details: "Quisque rhoncus scelerisque sapien, tempor vestibulum dui tincidunt eu. Maecenas scelerisque, dolor sed vehicula pulvinar, ligula erat ornare arcu, in dictum ipsum libero vel est. Donec porttitor venenatis lacus, a laoreet orci. Proin quam mi, ultrices in ullamcorper vel, malesuada suscipit lectus. Nam faucibus commodo quam, auctor vehicula felis condimentum quis. Phasellus tempor molestie enim, at vehicula justo auctor eu. Pellentesque venenatis elit eu malesuada fringilla." 
 
    }]; 
 
})

<!DOCTYPE html> 
 
<html ng-app="myApp"> 
 

 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
    <script src="script.js"></script> 
 
    <style> 
 
    .button 
 
    </style> 
 
</head> 
 

 
<body ng-controller="mainCtrl"> 
 
    <h1>People and Details</h1> 
 
    <div class="container-fluid"> 
 
    <table class="table"> 
 
     <thead style="background-color: lightgray;"> 
 
     <tr> 
 
      <td style="width: 30px;"></td> 
 
      <td> 
 
      Name 
 
      </td> 
 
      <td>Gender</td> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     <tr ng-repeat-start="person in people"> 
 
      <td> 
 
      <button ng-if="person.expanded" ng-click="person.expanded = false">-</button> 
 
      <button ng-if="!person.expanded" ng-click="person.expanded = true">+</button> 
 
      </td> 
 
      <td>{{person.name}}</td> 
 
      <td>{{person.gender}}</td> 
 
     </tr> 
 
     <tr ng-if="person.expanded" ng-repeat-end=""> 
 
      <td colspan="3">{{person.details}}</td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    </div> 
 
</body> 
 

 
</html>

plunker爲上述C ode

來源

2017-08-23 12:36:15

如何使用Angualrjs創建摺疊表

回答

相關問題