2016-12-05 16 views
0

Angular JSの新機能です。私は角度のjsでcaraouselに取り組んでいます。私はDIVを4のSETを持つように繰り返したいと思っています。角度番号は定義された番号で繰り返されます

ng-if="$index % 4 == 0"を使った後にdivが作成されていますが、私は4つの項目を取得できません。

DIVで4つのアイテムを取得するためにINDEXを使用するにはどうすればよいですか?

次のようなコードを見てください:

<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> 

enter image description here

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";*/ 
      }); 
    } 
} 
+3

R:代わりに、単一の '='

、代わりに書き込み機能のgetSpecialDeals()の、この操作を行うの一度あなたの投稿を耳にして、それが有意義であるかどうかチェックしてください。コントローラーはどこですか? ** getSpecialDeals()**はどういう意味ですか? ** SpecialDeals **はどういう意味ですか? – Aravind

答えて

0

EDIT:それは..あなたがspecialDealsを反復処理するNG・リピートを使用する必要がありますが見つかりました。

if(response.data.SpecialProductsList!==undefined){ 

- :それはあるべき 、私はコードの実行を行うことができませんでしたが、私はちょうど有用であるために、いくつかのミスを指摘したいと思い、これは

<h3 ng-repeat="x in specialDeals">{{x.name}}</h3> 

を役に立てば幸い

$scope.getSpecialDeals=function() { if (document.getElementById('FCDivID'))..... 
関連する問題