如何使用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创建折叠表

回答

相关问题