CODEWITHSUNDEEP
angularjs
None
None

Reputation: 9247

I want to expand row in table?

I have this fillder http://jsfiddle.net/LgrNF/245/ What im trying to do is when user click on number 1 to open row bellow number 1 and display message :"Some message" and if he click on number 2 to open row bellow number 2 and so on. But i have a littlebit problem.Any suggestion?

app = angular.module("App", []);

app.controller("AppCtrl", function($scope) {
    $scope.message = "Some message";
    $scope.items = [1,2,3,4,5,6,7];
    $scope.toggleDetail = function($index) {
        //$scope.isVisible = $scope.isVisible == 0 ? true : false;
        $scope.activePosition = $scope.activePosition == $index ? -1 : $index;
    };
});

EDIT: I uploaded new fiddler where i get message on bottom of page

Upvotes: 0

Views: 514

Answers (1)

Pierre-Alexandre Moller
Pierre-Alexandre Moller

Reputation: 2354

By add the repeat on tbody instead of tr you can do that. You will be able do make a second tr which contains the message. Then you will show it only if your $index is the active position.

 <tbody ng-repeat="iteam in items">
     <tr>
       <td>{{iteam}}</td>
       <td class="main-row" ng-click=toggleDetails($index)>Click</td>
     </tr>
     <tr ng-show="activePosition == $index">
        <td>{{message}}</td>
     </tr>
</tbody>

Working Fiddle

Upvotes: 1

Related Questions