我怎样才能在分页表中正确添加div

时间:2017-03-16 15:27:11

标签: javascript jquery html css angularjs

我有那个div。没关系!

<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)后,div在.tr-table中添加到我自动删除。 你可以在http://point.salesdep.by/

看到它是如何发生的

点击按钮&#34; product&#34; (一次),然后转到表格的下一页。然后点击按钮&#34; product&#34;再次。 (&#34;不工作&#34;)因为div&#39; .product&#39;从第一页删除。请大家帮忙!

1 个答案:

答案 0 :(得分:1)

以角度方式做到这一点会更容易。更新你的父div(ng-repeat shops)并添加你的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>

并相应地更新您的控制器(我的回复可能不起作用,它只是为了给您一个主要想法):

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