Angular js动态隐藏和显示行

Question

我们使用 angular js 在正常 html table 中显示事件。 table 将如下所示

*-------------------------------*
| Time  |  Name                 |
*-------*-----------------------*
| 07:00 | xxxxxxxxxxx           |
|-------|                       |
| 07:15 |                       |
|-------|-----------------------|
| 07:30 | xxxxxxxxxxxxxx        |
|-------|-----------------------|
| 07:45 |                       |
|-------|-----------------------|
| 08:00 |                       |
|-------|-----------------------|
| 08:15 | xxxxxxxxxxxxxx        |
|-------|-----------------------|

如果我单击 隐藏空闲插槽 它应该隐藏所有空闲列并显示如下所示。如果该行被合并，例如 07,07:15 ，它应该只显示第一行。（在 json 中隐藏所有 type = Free ）

*-------------------------------*
| Time  |  Name                 |
*-------*-----------------------*
| 07:00 | xxxxxxxxxxx           |
|-------|-----------------------|
| 07:30 | xxxxxxxxxxxxxx        |
|-------|-----------------------|
| 08:15 | xxxxxxxxxxxxxx        |
|-------|-----------------------|

代码

App.js

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

app.controller('MainCtrl', function($scope) {
    $scope.array = [
    { "StartTime": "07:00", "Type":"Booked", "Name": "xxxxxxxx", "Slots": ["07:00","07:15"] },
    { "StartTime": "07:30", "Type":"Blocked", "Name": "xxxxxxxx", "Slots": ["07:30"] },
    { "StartTime": "07:45", "Type":"Free", "Slots": ["07:45"] },
    { "StartTime": "08:00", "Type":"Free", "Slots": ["80:00"] },
    { "StartTime": "08:15", "Type":"Booked", "Name": "xxxxxxxx", "Slots": ["08:15"] }

    ];
});

index.html

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

  <head>
    <script data-require="angular.js@*" data-semver="1.3.6" src="https://code.angularjs.org/1.3.6/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="app.js"></script>
  </head>

  <body ng-Controller="MainCtrl">
    <table border="1">
      <thead>
        <tr>
          <th>Time</th>
          <th>Name</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat-start="item in array">
          <td>{{item.Slots[0]}}</td>
          <td rowspan="{{item.Slots.length}}">{{item.Name}}</td>
        </tr>
        <tr ng-repeat="slot in item.Slots" ng-if="!$first" ng-repeat-end>
          <td>{{slot}}</td>
        </tr>
      </tbody>
    </table>
  </body>

</html>

笨蛋 Link

http://plnkr.co/edit/snKmf7xyrDV6aIwLytKq?p=preview

Answer 1

plunker 上有可用的版本：

http://plnkr.co/edit/TXLSMx3TmurmMefdWGIW?p=info

为此，我使用布尔变量来了解您是否要显示空闲插槽：

  $scope.showFree = true;

  $scope.changeView = function(){
    $scope.showFree = !$scope.showFree;
  }

使用这段代码，如果类型是空闲的，我可以隐藏整行，或者当它是合并时，我可以只隐藏第二行。为了隐藏合并，我使用你已经拥有的 $first :

ng-hide="!$first && !showFree"

Angular js动态隐藏和显示行

Angular js dynamically hide and show rows

angularjs

show-hide

tablerow