CODEWITHSUNDEEP
htmlangularjstwitter-bootstrapngtable
nan
nan

Reputation: 191

expand/collapse the row information with dynamic data

I am working on angularjs application. I want to expand/collapse table row and show more dynamic information when clicked on the image present in the table row.

Please find the demo : http://next.plnkr.co/edit/LjVTnKjaLdnYojqV?preview

WHen clicked on the tick mark present on the row, i want to show more details for that row. Currently with my demo above, it is expanding the row or collapsing when clicked on the image but issue is it is not showing the dynamic data information in the expanded row(newly shown row).

sample:

<table ng-table="tableParams" class="table table-condensed table-bordered table-striped">
    <tbody ng-repeat="row in $data">
    <tr ng-click="show()">
      <td>
            <a class="btn btn-link" ng-init="toggle[$index] = false" ng-click="toggle[$index] = !toggle[$index]">
              <span class="glyphicon glyphicon-ok" ng-if="!toggle[$index]"></span>
              <span class="glyphicon glyphicon-bed" ng-if="toggle[$index]"></span>
            </a>
          </td>

      <td data-title="'Name'">{{row.name}}</td>
      <td data-title="'Age'">{{row.age}}</td>
      <td data-title="'SID'">{{row.sid}}</td>
    </tr> 
    <tr ng-if="toggle[$index]">
      <div ng-table="tableParams2" ng-repeat="row in $data">
          <td> {{$index}}</td>
          <td> {{product}}</td>
           <td> {{month}} </td>
            <td> {{pid}}</td>
      </div>
    </tr>
    </tbody>
  </table>

js code:

app.controller('MainCtrl', function($scope, NgTableParams) {

$scope.show = function(){
  alert("show/hide");
  var data = [{product: "TV", month: 5,pid:"11"},
              {product: "mobile", age: 4,pid:"22"},
              {product: "desktop", age: 7,pid:"33"}];
   $scope.tableParams2 = new NgTableParams({}, { dataset: data});
}

var data = [{name: "Moroni", age: 50,sid:"12PAX"},
              {name: "Tiancum", age: 43,sid:"12PAX"},
              {name: "Jacob", age: 27,sid:"12PAX"},
              {name: "Nephi", age: 29,sid:"12PAX"},
              {name: "Enos", age: 34,sid:"12PAX"},
              {name: "Tiancum", age: 43,sid:"12PAX"},
              {name: "Jacob", age: 27,sid:"12PAX"},
              {name: "Nephi", age: 29,sid:"12PAX"},
              {name: "Enos", age: 34,sid:"12PAX"},
              {name: "Tiancum", age: 43,sid:"12PAX"},
              {name: "Jacob", age: 27,sid:"12PAX"},
              {name: "Nephi", age: 29,sid:"12PAX"},
              {name: "Enos", age: 34,sid:"12PAX"},
              {name: "Tiancum", age: 43,sid:"12PAX"},
              {name: "Jacob", age: 27,sid:"12PAX"},
              {name: "Nephi", age: 29,sid:"12PAX"},
              {name: "Enos", age: 34,sid:"12PAX"}];

$scope.tableParams = new NgTableParams({}, { dataset: data});  
});

Upvotes: 0

Views: 1838

Answers (1)

Gabe Gates
Gabe Gates

Reputation: 1000

I changed to the following, can't tell for certain but seems like ng-table had an issue with the div around the td elements, and may have had a problem being nested and referencing $data again? Maybe someone can comment with more knowledge.

.js

$scope.show = function(){
  alert("show/hide");
  $scope.tableParams2 = [{product: "TV", month: 5,pid:"11"},
              {product: "mobile", age: 4,pid:"22"},
              {product: "desktop", age: 7,pid:"33"}];
}

.html

<tr ng-if="toggle[$parent.$index]"ng-repeat="row in tableParams2">
      <td> {{$index}}</td>
      <td> {{row.product}}</td>
       <td> {{row.month}} </td>
        <td> {{row.pid}}</td>
</tr>

My updated Plunker

Upvotes: 1

Related Questions