Angular js dynamically hide and show rows

Question

We are showing events in a normal html table using angular js. The table will be like as shown below

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

and if i click hide free slots it should hide all free columns and show like given below. if the row is merged , for example 07,07:15 , it should show only the first row. (hide all with type = Free in json )

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

Code

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>

Plunker Link

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

is your plunker/sample unfinished? You said "if i click hide free slots", yet there is no button anywhere to be clicked. Have you actually tried to solve the problem at all? a quick google search should have turned up ng-if to combine with whatever button you are planning to add... — Claies
– Claies, Commented May 18, 2015 at 14:43

Pierre-Alexandre Moller · Accepted Answer · 2015-05-18 14:48:11Z

1

There is the working version on plunker :

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

To do so, I use a boolean var to know if you want to show the free slot or not :

  $scope.showFree = true;

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

With this code, I can hide the whole line if the Type is free or only the second line when it's a merge. To hide on the merge, I use the $first that you alreay have like this :

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

answered May 18, 2015 at 14:48

Pierre-Alexandre Moller

2,3541 gold badge22 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular js dynamically hide and show rows

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related