Question

我试图在离子幻灯片盒中使用ng-repeat来显示来自api响应的图像，但我没有得到我除外，我做了很多镜头并尝试了我的解决方案但仍然在显示数据时出现问题在离子滑动盒中。

我确实使用下面链接中提到的代码： - Ionic (angularjs) ion-slide-box with ng-repeat not updating

我确实使用： - $ ionicSlideBoxDelegate.update（）;

但在实施方面仍然存在问题。

这是我的一些代码： -

<div class="row">
    <ul class="list">
        <li class="item">
            <h2>
                Sale<span><a href="#"><i class="icon ion-chevron-down"></i></a></span>
            </h2>
            <ion-slide-box 
                on-slide-changed="slideChanged(index)"
                does-continue="true"> <ion-slide
                ng-repeat='product in SaleProductList' 
                repeat-done="repeatDone()"
            >
                <div class="row">
                    <div class="col cat">
                        <img 
                            ng-src="{{product.product_image_url}}"
                            ng-click="getProductDetail(products.product_id)"
                            alt="suits"
                        />
                        <div class="overlay">
                            <h2>
                                <a>{{product.udropship_vendor_value}}</a>
                            </h2>
                            <div class="row desc">
                                <div class="col some-space">
                                    <div class="hardware-heading">
                                        <img src="img/mod-icon.png" alt="mod">Mods
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="hardware-heading for-time">
                                        <img src="img/time-ago-icon.png" alt="time">20 min ago
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="hardware-heading for-hardware">Hardware</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </ion-slide></ion-slide-box>
        </li>
    </ul>
</div>

App Controller：

app.controller(
    'NewfeedCtrl',
    function($scope, $ionicPopup, WebService, TabNameService, DataService, $state, ProductId, $ionicSlideBoxDelegate) {
        getSaleProducts();
        function getSaleProducts() {
            var urlGetSaleProducts = 'http://192.168.0.17/wholesaleapp/index.php/restapi/products/saleslisting';
            var apiMethod = 'GET';
            var params = {};
            var result = WebService.makeServiceCall(urlGetSaleProducts, params, apiMethod, '');
            result.then(function(response) {
                $scope.SaleProductList = [];
                for ( var i = 0; i < response.length; i++) {
                    var product = {};
                    product.product_id = response[i].entity_id;
                    product.type_id = response[i].type_id;
                    product.attribute_set_id = response[i].attribute_set_id;
                    product.cat_index_position = response[i].cat_index_position;
                    product.special_from_date = response[i].special_from_date;
                    product.udropship_vendor = response[i].udropship_vendor;
                    product.udropship_vendor_value = response[i].udropship_vendor_value;
                    product.price = response[i].price;
                    product.final_price = response[i].final_price;
                    product.minimal_price = response[i].minimal_price;
                    product.min_price = response[i].min_price;
                    product.max_price = response[i].max_price;
                    product.tier_price = response[i].tier_price;
                    product.product_image_url = response[i].image_url;
                    $scope.SaleProductList.push(product);
                }
            },
            function(response) {
                $ionicPopup.alert({
                    title : JSON.stringify(response.message)
                });
                $scope.data.password = '';
                console.log(''+ JSON.stringify(response));
            });
        }
        $scope.getProductDetail = function(productId) {
            ProductId.addProductId(productId);
        }
        $scope.repeatDone = function() {
            $ionicSlideBoxDelegate.update();
        };
    }
);

在我的service.js类中： -

app.directive('repeatDone', function() {
    return function(scope, element, attrs) {
        if (scope.$last) {
            scope.$eval(attrs.repeatDone);
        }
    }
});

任何帮助将不胜感激

感谢和安培; Regargs

Answer 1

我建议如下：

创建一个单独的数组变量来保存使用for循环
使用angular.copy（）将该变量复制到$ scope.SaleProductList
在for循环之后完成所有操作后，调用$ ionicSlideBoxDelegate.update（）;

我从来不需要像重复一样的指令来更新幻灯片盒。这就是我以前的做法。

所以它会像

$scope.SaleProductList = [];
var productList = [];
for (var i = 0; i < response.length; i++) {
    var product = {};
    product.product_id = response[i].entity_id;
    product.type_id = response[i].type_id;
    product.attribute_set_id = response[i].attribute_set_id;
    product.cat_index_position = response[i].cat_index_position;
    product.special_from_date = response[i].special_from_date;
    product.udropship_vendor = response[i].udropship_vendor;
    product.udropship_vendor_value = response[i].udropship_vendor_value;
    product.price = response[i].price;
    product.final_price = response[i].final_price;
    product.minimal_price = response[i].minimal_price;
    product.min_price = response[i].min_price;
    product.max_price = response[i].max_price;
    product.tier_price = response[i].tier_price;
    product.product_image_url = response[i].image_url;

    productList.push(product);

}

$scope.SaleProductList = angular.copy(productList);
$ionicSlideBoxDelegate.update();

希望它有所帮助！

Answer 2

通过更改我的HTML来解决我的问题： -

<h2> Sale<span><a href="#"><i class="icon ion-chevron-down"></i></a></span>	</h2>

 <ion-slide-box show-pager="false" does-continue="true" on-slide-changed="slideChanged(index)">
         
		  <ion-slide class="slide_rep" ng-repeat='product in SaleProductList' >

			<div class="row">
				<div class="col cat">
					<img ng-src="{{product.product_image_url}}"
						ng-click="getProductDetail(products.product_id)" alt="suits" />
					<div class="overlay">
						<h2>
							<a>{{product.udropship_vendor_value}}</a>
						</h2>
						<div class="row desc">
							<div class="col some-space">
								<div class="hardware-heading">
									<img src="img/mod-icon.png" alt="mod">Mods
								</div>
							</div>
							<div class="col">
								<div class="hardware-heading for-time">
									<img src="img/time-ago-icon.png" alt="time">20 min ago
								</div>
							</div>
							<div class="col">
								<div class="hardware-heading for-hardware">Hardware</div>
							</div>
						</div>
					</div>
				</div>


			</div>
			
		</ion-slide>
		
        </ion-slide-box>

重复不适当地工作在离子滑动盒Ui变得扭曲

2 个答案: