javascript - 我如何正确地在分页表中附加 div

Question

我有那个分区。没关系!

<div class="product"><div class="product-list-td col-xs-12 col-sm-12" ng-repeat="products in showProduct">
                    <div class="numeric-prod col-xs-12 col-sm-2">
                        {{$index+1}}
                    </div>
                    <div class="col-xs-12 col-sm-2">
                        {{ products.name }}
                    </div>
                    <div class="col-xs-12 col-sm-2">
                        {{ products.article }}
                    </div>
                    <div class="col-xs-12 col-sm-2">
                        {{ products.description }}
                    </div>
                    <div class="col-xs-12 col-sm-2">
                        {{ products.cost }}
                    </div>
                    <div class="col-xs-12 col-sm-2"">
                        <button type="button" class="btn btn-warning delete-product col-xs-12 col-sm-12" data-ng-click="deleteProduct( products.id )">Delete</button>
                    </div>
                </div></div>

我尝试在 ng-repeat 函数之后添加那个 div。他工作。 (那个代码)

$scope.productClick = function (event) {
        if ($scope.testId != event)
        {
            $scope.testId = event;
            if ($scope.testId != undefined)
            {
                $scope.productTableName = $filter('filter')($scope.ShopTable, {id: $scope.testId}, true);
                $scope.showProduct = $filter('filter')($scope.ProductTable, {shop_id: $scope.testId}, true);
                $('.product').appendTo('#'+event);
                $('.tr-table .product').css({'display' : 'block'});
                if ($scope.showProduct[0]== undefined)
                {
                    $scope.ProductsShopName = 'No Products';
                }
                else
                {
                    $scope.ProductsShopName = $scope.productTableName[0].name+' product list';
                }
            }
        } else {
            $scope.testId = 0 ;
            $('.tr-table .product').css({'display' : 'none'});
            $('.product').appendTo('.container');
        }
    }

为什么我会问 - 在移动到新页面(dir pagination angularjs)后，.tr-table 中添加给我的 div 自动删除。你可以在这里看到它是如何发生的 http://point.salesdep.by/

单击“产品”按钮(一次)，然后转到表格的下一页。然后再次单击“产品”按钮。 (“不工作”)因为 div '.product' 从第一页中删除。请大家帮忙!

Answer 1

用 Angular 方式会更容易。更新您的父 div(ng-repeat shops)并添加带有 bool 值的 div 以决定是否显示它:

<div class="row dragger">....</div>
<div class="product" data-ng-show="shop.showList">
    <div class="product-list-td col-xs-12 col-sm-12" ng-repeat="products in shop.showProduct">
        <div class="numeric-prod col-xs-12 col-sm-2">
            {{$index+1}}
        </div>
        <div class="col-xs-12 col-sm-2">
            {{ products.name }}
        </div>
        <div class="col-xs-12 col-sm-2">
            {{ products.article }}
        </div>
        <div class="col-xs-12 col-sm-2">
            {{ products.description }}
        </div>
        <div class="col-xs-12 col-sm-2">
            {{ products.cost }}
        </div>
        <div class="col-xs-12 col-sm-2"">
            <button type="button" class="btn btn-warning delete-product col-xs-12 col-sm-12" data-ng-click="deleteProduct( products.id )">Delete</button>
        </div>
    </div>
</div>

并相应地更新您的 Controller (我的回答可能不起作用，它只是为您提供主要思想):

$scope.productClick = function (shop) {
    //if you want to hide all other div, you can loop here over shops to
    //set all showList at false
    shop.showList = !shop.showList;
    if(true === shop.showList){
        //this part is probably false
        //you need to fetch the data here so you can display it
        $scope.testId = shop.id;
        $scope.productTableName = $filter('filter')($scope.ShopTable, {id: $scope.testId}, true);
        shop.showProduct = $filter('filter')($scope.ProductTable, {shop_id: $scope.testId}, true);

        if (shop.showProduct[0]== undefined)
            {
                $scope.ProductsShopName = 'No Products';
            }
            else
            {
                $scope.ProductsShopName = $scope.productTableName[0].name+' product list';
            }
        }
    }
}