CODEWITHSUNDEEP
htmlcssangularjshtml-table
Ben10
Ben10

Reputation: 498

Add elements below row <td>

In my angularjs app there a rows (using ng-repeat), created through . enter image description here The code creating rows is below:

<tbody>
    <tr ng-repeat="data in downloads">
        <td data-title="ID">{{$index + 1}}</td>



        <td data-title="User">{{data.user_name}}</td>
        <td data-title="Issue">{{data.download_name}}</td>
        <td data-title="Progress">{{data.size}}</td>

        <td data-title="Completed time" am-time-ago="data.completed_time|amFromUnix"</td>
        <td class="information-parent" data-title="More">
            <md-icon ng-click="switchIcon()" class="bassa-red-color">{{icon}}</md-icon
        </td>
    </tr>
</tbody>

I'm trying to implement something that when you click the arrow, the row expands with information appearing like this: enter image description here I however can not get the information to appear along the bottom like that. What should I be trying to implement to get text along the bottom - flex box, inline-box ?

Upvotes: 1

Views: 146

Answers (3)

NTP
NTP

Reputation: 4448

You can try the following:

  1. move your ng-repeat to your tbody
  2. add ng-init="data.showSubRow = false" to your tbody
  3. add another row to the tbody that should only be visible when showSubRow is true

so your ng-repeat would look like

<tbody ng-repeat="data in downloads" ng-init="data.showSubRow = false">
    <tr>
        visible row
    </tr>
    <tr ng-show="data.showSubRow">
        visible when clicked
    </tr>
</tbody>

now you can add individual buttons in each row to show / hide content on individual rows or add an edit all function that would make all subrows visible

show / hide individual row

   <tr>
        <td data-title="ID">
            {{$index + 1}
            <span>
                <button ng-show="!data.showSubRow" ng-click="data.showSubRow = true">+</button>
                <button ng-show="data.showSubRow" ng-click="data.showSubRow = false">-</button>
            </span>
        </td>
        <td data-title="User">{{data.user_name}}</td>
        <td data-title="Issue">{{data.download_name}}</td>
        <td data-title="Progress">{{data.size}}</td>

        <td data-title="Completed time" am-time-ago="data.completed_time|amFromUnix"</td>
        <td class="information-parent" data-title="More">
            <md-icon ng-click="switchIcon()" class="bassa-red-color">{{icon}}</md-icon
        </td>
    </tr>

display all

  $scope.editAll = function(){
    angular.forEach($scope.downloads, function(value, key) {
      value.showSubRow = !value.showSubRow;
    });
  }

Working sample ----> Demo

Upvotes: 1

Shiv Kumar Baghel
Shiv Kumar Baghel

Reputation: 2480

Try below code for your scenario.

(function(ng, app){

    app = angular.module('app', [])

    app.controller("mainController", ['$scope',
      function($scope) {
        $scope.downloads = [{
            "user_name": "John",
            "download_name": "Doe jhonejhonejhone",
            "size": "0 byte"
          },
          {
            "user_name": "Anna",
            "download_name": "Doe DoeDoeDoeDoe",
            "size": "0 byte"
          },
          {
            "user_name": "Maron",
            "download_name": "Anna DoeDoeDoeDoeDoe",
            "size": "5 byte"
          }
        ];

        $scope.editFiles = function() {
          $scope.editBar = true;
        };

        $scope.remove = function(index) {
          $scope.downloads.splice(index, 1);
        };

      }
    ]);

}(angular));
.btn-primary{
    margin-right: 10px;
}
<html ng-app="app">

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

</head>

<body>
  <div class="container" ng-controller="mainController">
    <div class="row">
      <div class="col-md-12">
        <input type="submit" class="btn btn-primary addnew pull-left" value="Edit Files" ng-click="editFiles()">
      </div>
    </div>

    <div class="row">
      <div class="col-md-12">
        <div class="panel panel-default">
          <div class="panel-body">
            <form>
              <table border=1 class="table table-striped table-bordered">
                <thead>
                  <tr>
                    <th>
                      <b> # </b>
                    </th>
                    <th>User</th>
                    <th>Download Name</th>
                    <th>Complete Name</th>
                  </tr>
                </thead>
                <tbody>
                  <tr ng-repeat="data in downloads">
                    <td>
                      <b> {{$index + 1}} </b>
                    </td>
                    <td>
                      {{data.user_name}}                   
                    </td>
                    <td>
                      {{data.download_name}}
                      
                      <div class="btn-group pull-right" ng-show="editBar">
                        <button class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-pencil"></span></button>
                        <button class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-trash" ng-click="remove($index)"></span></button>
                      </div>
                      
                    </td>
                    <td>
                      {{data.size}}
                    </td>
                  </tr>
                </tbody>
              </table>

            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Upvotes: 1

Fotis Papadamis
Fotis Papadamis

Reputation: 303

Take a look at Bootstrap collapse.js. I think this is what you are looking for, of course, you have to change it in order to meet your needs.

Upvotes: 1

Related Questions