Question

我有一个html表，当我点击任何一行时，新表显示有关某些行数据的更具体信息。我使用的是ng-click，ng-repeat和ng-show。这是我想要实现的：我想这样做，当我点击某一行时，表格会显示，当我再次点击同一行时，表格会隐藏，当某些行处于活动状态时，如果您点击另一行排第一个表隐藏和新节目。这是我的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>

这是我的控制器：

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

最初，"showDetails"数组中每个对象的$scope.carList设置为false。

然后你可以在我的html中看到ng-click="modelRow.activeRow = car.name; car.showDetails = !car.showDetails" 它运行正常，但是当我点击"Volkswagen Golf"行然后点击"Ford Focus hatchback"然后再点击"Volkswagen Golf"行时，表格就不会显示了。

这种情况正在发生，因为当我点击任何行"showDetails"上的某个位时$scope.carList数组中的值设置为true而不是false值。

如何解决此问题或实现目标的其他方式？

注意：我也需要一个不会减慢网站速度的解决方案，（我的$scope.carList阵列有数百辆车）

Answer 1

制作＆＃39; showDetails＆＃39;与汽车无关的全球变量。
为ng-click =＆＃34; func（car）＆＃34;。

＆＃13;

    $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;
    }

＆＃13;

AngularJS：点击隐藏活动表并显示新表？

1 个答案: