檢查ng-repeat中的條件

Question

我正在離子/ angularjs中創建應用程序。

控制器從URL提取JSON格式的數據，並在div元素中顯示唯一的圖像。 我想允許單擊這些圖像，然后根據offer_name顯示數據，該數據來自JSON數據。

例如：假設我顯示了亞馬遜的圖像（在后台offer_name是亞馬遜（有10條記錄））。 當用戶單擊它時，它將顯示與亞馬遜有關的所有記錄。

希望您能理解我的觀點，但不包括數據庫； 它僅適用於JSON數據。

另外，如何在ng-repeat中檢查檢查當前值？

這是我的代碼：

.controller('menuCtrl', function($scope,$http) {   
     $http.get("http://tools.vcommission.com/api/coupons.php?apikey=e159f64e3dd49fddc3bb21dcda70f10c6670ea91aac30c7cb1d4ed37b20c45b8").then(function (response) {
      $scope.myData = response.data;

      /* $scope.stack=[];
      angular.forEach($scope.myData, function(item){

        $scope.stack =item.store_image;
        var uni_img=[];
        for(var i=0 ; i< $scope.stack.length;i++)
        {
            if(uni_img.indexOf($scope.stack[i] == -1))
                uni_img.push($scope.stack[i]);
        }
         console.log(uni_img);
})*/
  });
      $scope.dealopen = function($a){
            for (var i=0;i<$scope.myData.length;i++)
        {
            //console.log($scope.data[i].name);
            $link=$scope.data[i].offer_name;
            if ($link==$a)
            {

            $window.open($link,"_self","location=yes"); 
            console.log($a);
            }
        }       
        }        
})

HTML

<div class="item col-sm-2 col-sm-3 col-md-2 " ng-repeat="da in myData | unique: 'store_image'" >
    <div class="thumbnail">                   
        <img class="thumbnail  img-responsive " ng-src="{{ da.store_image}}"     
                    />   
         <div class="caption">
            <b class="group inner list-group-item-heading center-block">
            {{da.offer_name | limitTo: 12 }} Deals</b>                           
            <a class="item item-text-wrap" ng-href="#/Deals/{{da.offer_name}}">View Deal</a>    
        </div>
     </div>
</div>

這是輸出：

。

Answer 1

實現此目的的一種方法是使用ng-click執行javascript（例如，內聯或在控制器范圍內調用函數。每個ngRepeat $ index的文檔都可以引用當前索引：

特殊屬性在每個模板實例的本地范圍內公開，包括：

  + ---------- + --------- + ---------------------------- ------------------------------------------------- +\n |  可變|  類型  詳情|\n + ---------- + --------- + ---------------------------- ------------------------------------------------- +\n |  $ index |  編號  重復元素的迭代器偏移量（0..length-1）|\n |  $ first |  布爾|  如果重復元素在迭代器中位於第一個，則為true。  |\n |  $中|  布爾|  如果重復元素在迭代器的第一個和最后一個之間，則為true。  |\n |  $ last |  布爾|  如果重復元素在迭代器中位於最后，則為true。  |\n |  $ even |  布爾|  如果迭代器位置$ index為偶數，則為true（否則為false）。  |\n |  $ odd |  布爾|  如果迭代器位置$ index為奇數，則為true（否則為false）。  |\n + ---------- + --------- + ---------------------------- ------------------------------------------------- + 

^1個

因此， 圖像標簽可以具有ng-click屬性來利用該指令，如下所示：

    <img class="thumbnail  img-responsive " ng-src="{{ da.store_image}}" ng-click="showData(da.offer_name, $index)"/>

然后使用Array.filter（）將所有商品過濾到與offer_name匹配的商品過濾數組中：

$scope.showData = function (offer_name, index) {
  $scope.offerName = da.offer_name;
  $scope.filteredOffers = $scope.myData.filter(function(offer) {
    return offer.offer_name == $scope.offerName;
  });
}

然后添加另一組元素以在filteredOffers中顯示項目。

<div ng-repeat="offer in filteredOffers">
  <div class="couponCode">{{offer.coupon_code}}</div>
  <div class="couponTitle">{{offer.coupon_title}}</div>
  <div class="couponDescription">{{offer.coupon_Description}}</div>
</div>

請參見下面的示例，其中showData函數使用這些組件更新模型selectedIndex ， offerName和filteredOffers 。

 angular.module('myApp', ['ui']) .controller('menuCtrl', ['$scope', '$http', function($scope, $http) { $scope.offerName = ''; //set initially $scope.selectedIndex = -1; $scope.filteredOffers = []; $http.get("http://tools.vcommission.com/api/coupons.php?apikey=e159f64e3dd49fddc3bb21dcda70f10c6670ea91aac30c7cb1d4ed37b20c45b8").then(function(response) { $scope.myData = response.data; }); $scope.showData = function(offer_name, index) { $scope.offerName = offer_name; $scope.filteredOffers = $scope.myData.filter(function(offer) { return offer.offer_name == $scope.offerName; }); $scope.selectedIndex = index; } } ]); 

 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js" data-semver="1.1.5" data-require="angular.js@*" context="anonymous"></script> <script data-require="angular-ui@*" data-semver="0.4.0" src="//rawgithub.com/angular-ui/angular-ui/master/build/angular-ui.js" context="anonymous"></script> <div ng-app="myApp" ng-controller="menuCtrl"> <div> OfferName: <span ng-bind="offerName"></span> </div> <div> selected index: <span ng-bind="selectedIndex"></span> </div> <div class="item col-sm-2 col-sm-3 col-md-2 " ng-repeat="da in myData | unique: 'store_image'"> <div class="thumbnail"> <img class="thumbnail img-responsive " ng-src="{{ da.store_image}}" ng-click="showData(da.offer_name, $index)" /> <div class="caption"> <b class="group inner list-group-item-heading center-block"> {{da.offer_name | limitTo: 12 }} Deals</b> <a class="item item-text-wrap" ng-href="#/Deals/{{da.offer_name}}">View Deal</a> </div> </div> </div> <div ng-repeat="offer in filteredOffers"> <div class="couponCode">{{offer.coupon_code}}</div> <div class="couponTitle">{{offer.coupon_title}}</div> <div class="couponDescription">{{offer.coupon_Description}}</div> </div> </div> 

---

¹ https://docs.angularjs.org/api/ng/directive/ng重復

Answer 2

乍一看，您永遠不會調用$ scope.dealopen函數，也許這可以正常工作。

<div class="item col-sm-2 col-sm-3 col-md-2 " ng-repeat="da in myData | unique: 'store_image'" >
    <div class="thumbnail">                   
        <img class="thumbnail  img-responsive " ng-src="{{ da.store_image}}"/>   
        <div class="caption">
            <b class="group inner list-group-item-heading center-block">{{da.offer_name | limitTo: 12 }} Deals</b>                           
            <a class="item item-text-wrap" ng-click="dealopen(da.offer_name)">View Deal</a>    
        </div>
    </div>
</div>

Answer 3

您可以使用$ index，這是敏捷中用於了解ng-repeat中索引位置的變量，如果您想了解有關ng-repeat的另一個contro變量的信息，請閱讀下一個鏈接https：// docs中的文檔。 angularjs.org/api/ng/directive/ngRepeat

一個基本的例子是。

控制器

    app.controller('menuCtrl', function($scope,$http) {

      $scope.myData = [{path:'http://www.imagefree1.com',info:'http://www.infoimage1.com'},
                       {path:'http://www.imagefree2.com',info:'http://www.infoimage2.com'},
                       {path:'http://www.imagefree3.com',info:'http://www.infoimage3.com'}];

      $scope.callDetail=function(index)

         window.open(myData[index].info);
})

的HTML

<div ng-repeat="image in myData">
   <a href="#" ng-click="callDetail($index)">
      <img src="image.path" alt="Description"/>
   </a>
</div>