anglejs内のjsonの画像を一意に識別

Question

Json ResponseExample Images私はイオン/角度のアプリを作成していて、かなりうまく動作しているJSONオブジェクトからデータを取得していますが、同じイメージを持っている。 ユーザーがそれをクリックしてユーザーがその会社のすべての取引を取得する1つのユニークなイメージを作成したいと思います。私は、角度フィルター "ユニーク"を使ってみましたが、動作しませんでした。 この問題を解決するために親切に読んでくれてありがとうございました。

{ 
featured: "0", 
exclusive: "0", 
promo_id: "P59802", 
offer_id: "2239", 
offer_name: "Zotezo.com CPS - India", 
coupon_title: "Zotezo Crazy4", 
category: "Home & Kitchen", 
coupon_description: "TnC: [Free Shipping] [COD not available]", 
coupon_type: "Promotion", 
coupon_code: "", 
ref_id: "utm_source=vCommission&utm_medium=CPS&utm_content=Deals-of-the-Day&utm_campaign=vCommission", 
link: "http://tracking.vcommission.com/aff_c?offer_id=2239&aff_id=48766&url=http%3A%2F%2Fwww.zotezo.com%2Feveryday-wellness%3Futm_source%3DvCommission%26utm_medium%3DCPS%26utm_content%3DDeals-of-the-Day%26utm_campaign%3DvCommission", 
coupon_expiry: "2017-01-31", 
added: "2017-01-05", 
preview_url: "http://www.zotezo.com/everyday-wellness", 
store_link: "http://tracking.vcommission.com/aff_c?offer_id=2239&aff_id=48766", 
store_image: "http://media.vcommission.com/brand/files/vcm/2239/zottezo-2.jpg" 
}, 

Answer 1

よう

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


    $http.get("my.json").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("Unique Technologies : " + uni_img); 
     // its logging image link in console but how to display on front end 

     })  


    }); 

HTML

<table> 
       <tr> 
        <th>Brand</th> 
        <th>Deals</th> 

       </tr> 
       <tr class="list card" ng-repeat="da in uni_img "> 
        <td> <img class="thumbnail center-block img-responsive " ng-src="{{ da.uni_img }}" />{{da.category}}</td> 

        <td></td> 

       </tr> 
      </table> 

JSON実際にあなたがコントローラで何もする必要はありません。デフォルトでは、angleには一意のフィルタはありません。しかし、角度uiはユニークなので、依存関係をモジュールに挿入することができます.jsonのstore_imageを見てください。最初のstore_imageは他のstore_imageと異なり、残りは類似しているため重複は削除されます。以下は、あなたの質問は、JSONレスポンスで更新でし

// Code goes here 
 

 
var app = angular.module('myApp', ['ui.filters']); 
 

 
app.controller('MainController', function ($scope) { 
 
    $scope.name = "hello"; 
 
    
 
    $scope.data = [{ 
 
     featured: "0", 
 
     exclusive: "0", 
 
     promo_id: "P59802", 
 
     offer_id: "2239", 
 
     offer_name: "Zotezo.com CPS - India", 
 
     coupon_title: "Zotezo Crazy4", 
 
     category: "Home & Kitchen", 
 
     coupon_description: "TnC: [Free Shipping] [COD not available]", 
 
     coupon_type: "Promotion", 
 
     coupon_code: "", 
 
     ref_id: "utm_source=vCommission&utm_medium=CPS&utm_content=Deals-of-the-Day&utm_campaign=vCommission", 
 
     link: "http://tracking.vcommission.com/aff_c?offer_id=2239&aff_id=48766&url=http%3A%2F%2Fwww.zotezo.com%2Feveryday-wellness%3Futm_source%3DvCommission%26utm_medium%3DCPS%26utm_content%3DDeals-of-the-Day%26utm_campaign%3DvCommission", 
 
     coupon_expiry: "2017-01-31", 
 
     added: "2017-01-05", 
 
     preview_url: "http://www.zotezo.com/everyday-wellness", 
 
     store_link: "http://tracking.vcommission.com/aff_c?offer_id=2239&aff_id=48766", 
 
     store_image: "http://media.vcommission.com/brand/files/vcm/2239/zottezo-1.jpg" 
 
     }, 
 
     { 
 
     featured: "0", 
 
     exclusive: "0", 
 
     promo_id: "P59802", 
 
     offer_id: "2239", 
 
     offer_name: "Zotezo.com CPS - India", 
 
     coupon_title: "Zotezo Crazy4", 
 
     category: "Home & Kitchen", 
 
     coupon_description: "TnC: [Free Shipping] [COD not available]", 
 
     coupon_type: "Promotion", 
 
     coupon_code: "", 
 
     ref_id: "utm_source=vCommission&utm_medium=CPS&utm_content=Deals-of-the-Day&utm_campaign=vCommission", 
 
     link: "http://tracking.vcommission.com/aff_c?offer_id=2239&aff_id=48766&url=http%3A%2F%2Fwww.zotezo.com%2Feveryday-wellness%3Futm_source%3DvCommission%26utm_medium%3DCPS%26utm_content%3DDeals-of-the-Day%26utm_campaign%3DvCommission", 
 
     coupon_expiry: "2017-01-31", 
 
     added: "2017-01-05", 
 
     preview_url: "http://www.zotezo.com/everyday-wellness", 
 
     store_link: "http://tracking.vcommission.com/aff_c?offer_id=2239&aff_id=48766", 
 
     store_image: "http://media.vcommission.com/brand/files/vcm/2239/zottezo-2.jpg" 
 
     }, 
 
     { 
 
     featured: "0", 
 
     exclusive: "0", 
 
     promo_id: "P59802", 
 
     offer_id: "2239", 
 
     offer_name: "Zotezo.com CPS - India", 
 
     coupon_title: "Zotezo Crazy4", 
 
     category: "Home & Kitchen", 
 
     coupon_description: "TnC: [Free Shipping] [COD not available]", 
 
     coupon_type: "Promotion", 
 
     coupon_code: "", 
 
     ref_id: "utm_source=vCommission&utm_medium=CPS&utm_content=Deals-of-the-Day&utm_campaign=vCommission", 
 
     link: "http://tracking.vcommission.com/aff_c?offer_id=2239&aff_id=48766&url=http%3A%2F%2Fwww.zotezo.com%2Feveryday-wellness%3Futm_source%3DvCommission%26utm_medium%3DCPS%26utm_content%3DDeals-of-the-Day%26utm_campaign%3DvCommission", 
 
     coupon_expiry: "2017-01-31", 
 
     added: "2017-01-05", 
 
     preview_url: "http://www.zotezo.com/everyday-wellness", 
 
     store_link: "http://tracking.vcommission.com/aff_c?offer_id=2239&aff_id=48766", 
 
     store_image: "http://media.vcommission.com/brand/files/vcm/2239/zottezo-2.jpg" 
 
     }, 
 
     { 
 
     featured: "0", 
 
     exclusive: "0", 
 
     promo_id: "P59802", 
 
     offer_id: "2239", 
 
     offer_name: "Zotezo.com CPS - India", 
 
     coupon_title: "Zotezo Crazy4", 
 
     category: "Home & Kitchen", 
 
     coupon_description: "TnC: [Free Shipping] [COD not available]", 
 
     coupon_type: "Promotion", 
 
     coupon_code: "", 
 
     ref_id: "utm_source=vCommission&utm_medium=CPS&utm_content=Deals-of-the-Day&utm_campaign=vCommission", 
 
     link: "http://tracking.vcommission.com/aff_c?offer_id=2239&aff_id=48766&url=http%3A%2F%2Fwww.zotezo.com%2Feveryday-wellness%3Futm_source%3DvCommission%26utm_medium%3DCPS%26utm_content%3DDeals-of-the-Day%26utm_campaign%3DvCommission", 
 
     coupon_expiry: "2017-01-31", 
 
     added: "2017-01-05", 
 
     preview_url: "http://www.zotezo.com/everyday-wellness", 
 
     store_link: "http://tracking.vcommission.com/aff_c?offer_id=2239&aff_id=48766", 
 
     store_image: "http://media.vcommission.com/brand/files/vcm/2239/zottezo-2.jpg" 
 
     } 
 
    
 
    
 
    ]; 
 
});

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    </head> 
 

 
    <body ng-app="myApp"> 
 
    <div class="container" ng-controller="MainController"> 
 
     <table> 
 
      <tr> 
 
       <th>Brand</th> 
 
       <th>Deals</th> 
 

 
      </tr> 
 
      <tr class="list card" ng-repeat="da in data | unique: 'store_image'"> 
 
       <td> <img class="thumbnail center-block img-responsive " ng-src="{{ da.store_image }}" />{{da.category}}</td> 
 
       <td></td> 
 
      </tr> 
 
     </table> 
 
    </div> 
 
    
 
    
 
    
 
    <script data-require="jquery@2.2.4" data-semver="2.2.4" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
 
    <script data-require="angular.js@1.5.7" data-semver="1.5.7" src="https://code.angularjs.org/1.5.7/angular.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.js"></script> 
 
    <script data-require="bootstrap@3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <script src="script.js"></script> 
 
    </body> 
 

 
</html>