从angularjs中的json唯一标识图像

时间：2017-01-31 08:33:04

标签： angularjs json ionic-framework

Json Response Example Images我正在创建一个离子/角度的应用程序，并从JSON对象中获取数据，该数据运行良好，但它有一些重复的图像，如一家公司有很多交易，每个交易有相同的形象。 我想创建一个独特的图像，用户点击该图像，用户可以从该公司获得所有交易。我尝试使用角度过滤器“独特”，但它没有用。 感谢您的阅读，请给我一些解决此问题的建议。

.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喜欢

{
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"
},

1 个答案:

答案 0 :(得分：0)

实际上你不需要在控制器中做任何事情。默认情况下，angular不具有唯一的过滤器。但是角度ui确实具有唯一性，因此您可以将依赖项注入到您的模块中。查看json中的store_image。第一个store_image与其他store_image不同，其余类似，因此删除了重复项。以下是工作示例

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

相关问题
最新问题