AngularJS: on-click hide active table and show new one?

Question

I have an html table, and when I click on any row new table shows with more specific information about some row data. I am using ng-click, ng-repeat and ng-show. Here is what I am trying to achieve: I want to do so, when I click on some row, the table shows and when I click on the same row again the table hides and also when some row is active, if you click on another row the first table hides and the new shows. Here is my html:

<tbody>
    <tr ng-repeat-start="car in carList | filter:tableFilter" ng-click="modelRow.activeRow = car.name; car.showDetails = !car.showDetails">
        ....
    </tr>       
    <tr ng-repeat-end ng-show="modelRow.activeRow==car.name && car.allReviews.length!=0 && car.showDetails" class="hidden-table">
        <td colspan="6">
            <table class="table table-striped table-bordered table-condensed table-hover">
                <tbody ng-repeat="rev in car.allReviews">
                    ....
                </tbody>
            </table>
        </td>
    </tr>
</tbody>

Here is my controller:

carApp.controller("TableBodyCtrl", function($scope){
    $scope.modelRow = { activeRow: '' };
    $scope.carList = [{"name":"Ford Focus hatchback",...,"showDetails":false}...];

And initially my "showDetails" in every object in my $scope.carList array is set to false.

Then as you can see in my html I do ng-click="modelRow.activeRow = car.name; car.showDetails = !car.showDetails".
It works fine, but when I click, for example, on "Volkswagen Golf" row then on "Ford Focus hatchback" and then again on "Volkswagen Golf" row, the table would not show up.

It is happening because when I click a bit on any rows "showDetails" values in $scope.carList array are set to true not false value.

How can I fix this issue or what the alternative way to achieve my goal?

Note: also I need a solution that will not slow my website, (my $scope.carList array have hundreds of cars)

Petr Averyanov · Accepted Answer · 2014-09-30 08:05:53Z

1

make 'showDetails' a global variable not related to car.
make function for ng-click="func(car)".

    $scope.func = function(car) {
           if (!$scope.showDetails) {// open info
             $scope.showDetails = true;
           } else if ($scope.modelRow.activeRow = car.name && $scope.showDetails) { 
              // info was opened for, closing
             $scope.showDetails = false;
           } else { //info was opened, we open new one
             $scope.showDetails = true;
           }
           $scope.modelRow.activeRow = car.name;
    }

answered Sep 30, 2014 at 8:05

Petr Averyanov

9,5963 gold badges25 silver badges41 bronze badges

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

Collectives™ on Stack Overflow

AngularJS: on-click hide active table and show new one?

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