CODEWITHSUNDEEP
javascripthtmlangularjsionic-framework
sid
sid

Reputation: 1116

ng repeat not properply working on ion-slide-box Ui is getting distorted

I am trying to use ng-repeat in ion-slide-box in order to display images from api response but i am not getting what i excepting , i do goggled a lot and tried my solutions but still getting problem in showing data in ion-slide box .

I do use the code mention in below link :- Ionic (angularjs) ion-slide-box with ng-repeat not updating

I do make use of :- $ionicSlideBoxDelegate.update();

but still getting issue in implementing it.

here is some of my code :-

<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();
        };
    }
);

In my service.js class :-

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

Any help will be appreciated

Thanks&Regargs

Upvotes: 0

Views: 434

Answers (2)

sid
sid

Reputation: 1116

My problem get solved by changing my 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>

Upvotes: 0

Jad Salhani
Jad Salhani

Reputation: 490

What I suggest is the following:

  1. Create a separate array variable to hold the data that you create with the for loop
  2. use angular.copy() to copy that variable into your $scope.SaleProductList
  3. After all that is done after the for loop, call $ionicSlideBoxDelegate.update();

I never needed such a directive as the repeat-done to update a slide-box. This is how I used to do it.

So it would be something like 

$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();

Hope it helps!

Upvotes: 1

Related Questions