Ich bin neu in Angular JS
. Ich arbeite an einem caraousel
in eckigen js. Ich möchte eine DIV
wiederholen, die ein SET von 4 hat.Winkel js wiederholen in den definierten Nummern
Ich kann jetzt sehen divs werden nach der Verwendung ng-if="$index % 4 == 0"
erstellt, aber ich bin nicht in der Lage, die 4 Elemente zu bekommen.
Wie kann ich INDEX verwenden, um 4 Artikel in meinem sich wiederholenden DIV
zu bekommen?
Bitte werfen Sie einen Blick auf den Code, wie folgend:
<div class="carousel-inner" ng-init="getSpecialDeals()">
<div class="item" ng-class="{active: $index==0}" ng-repeat="specialDeals in SpecialDealsList" ng-if="$index % 4 == 0">
<div class="row text-center">
<!-- ITEM-->
<div class="span3">
<div class="thumbnail product-item">
<a href="#">
<img ng-src="{{specialDeals.images}}">
</a>
</div>
<h3> {{specialDeals.name}} </h3>
<p><a class="btn btn-large btn-block" href="http://www.bootstraptor.com">View details »</a>
</p>
</div>
<!-- ITEM-->
<!-- ITEM-->
<div class="span3">
<div class="thumbnail product-item">
<a href="#">
<img src="https://s-media-cache-ak0.pinimg.com/564x/16/03/33/160333e0e9d6563729313131ff755964.jpg">
</a>
</div>
<h3> {{specialDeals.name}}</h3>
<p><a class="btn btn-large btn-block" href="http://www.bootstraptor.com">View details »</a>
</p>
</div>
<!-- ITEM-->
<!-- ITEM-->
<div class="span3">
<div class="thumbnail product-item">
<a href="#">
<img src="https://s-media-cache-ak0.pinimg.com/564x/16/03/33/160333e0e9d6563729313131ff755964.jpg">
</a>
</div>
<h3>Product name</h3>
<p><a class="btn btn-large btn-block" href="http://www.bootstraptor.com">View details »</a>
</p>
</div>
<!-- ITEM-->
<!-- ITEM-->
<div class="span3">
<div class="thumbnail product-item">
<a href="#">
<img src="https://s-media-cache-ak0.pinimg.com/564x/16/03/33/160333e0e9d6563729313131ff755964.jpg">
</a>
</div>
<h3>Product name</h3>
<p><a class="btn btn-large btn-block" href="http://www.bootstraptor.com">View details »</a>
</p>
</div>
<!-- ITEM-->
</div>
</div>
function _getSpecialDeals() {
if (document.getElementById('FCDivID')) {
$scope.requestData = $scope.requestData + '&category_id=' + $scope.featuredCategoryId;
}
$http(
{
method : 'POST',
url : $scope.base + '/specialoffers/GetSpecialDeals',
crossDomain : true,
headers : {
'Content-Type' : 'application/x-www-form-urlencoded',
'key' : 'xxxxxxxxxxx'
},
data : $scope.requestData,
})
.then(
function successCallback(response) {
document.getElementById("gifLoader").style.display = "none";
//document.getElementById("gifLoader1").style.display = "none";
document.getElementById("loader").style.display = "none";
if(response.data.SpecialProductsList!=undefined){
if(response.data.SpecialProductsList.length<5){
$scope.flagArrow=false;}
}
if (response.data.status == "200") {
$scope.specialDeals = response.data;
$scope.totalPages = response.data.total_pages;
if ($scope.pageNumber > 1) {
for (var i = 0; i < response.data.SpecialProductsList.length; i++) {
$scope.SpecialDealsList
.push(response.data.SpecialProductsList[i]);
}
} else {
$scope.SpecialDealsList = $scope.specialDeals.SpecialProductsList;
}
if (document
.getElementById("list_item")) {
$scope.SpecialDealsList
.push({
"product_id" : "1",
"name" : "Get All Deals",
"product_selling_price" : "0.00",
"wish_list" : "False",
"images" : "img/view-more.jpg",
"product_special_from_date" : "",
"product_special_to_date" : "",
"product_special_price" : "",
})
};
}
/*document.getElementById("wpf-loader-two").style.display = "none";*/
});
}
}
R ead deinen Beitrag einmal und prüfen, ob es sinnvoll ist? Wo ist der Controller? ** getSpecialDeals() ** bedeutet? ** SpecialDeals ** bedeutet? – Aravind