Question

我在ionic / angularjs中创建app。

控制器从URL获取JSON格式的数据，并在div元素中显示唯一的图像。我想允许单击这些图像，然后根据来自JSON数据的 offer_name 显示数据。

例如：假设我显示亚马逊的图像（在背景中 offer_name 是亚马逊（有10条记录））。当用户点击它时，它会显示与amazon相关的所有记录。

希望你明白我的观点，但不包括数据库;它只适用于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>

这是输出：

myOutput

Answer 1

实现此目的的一种方法是使用ng-click执行javascript（例如内联或调用控制器范围内的函数。根据ngRepeat $ index 的文档可以引用当前索引：

特殊属性在每个模板实例的本地范围内公开，包括：

+----------+---------+-----------------------------------------------------------------------------+
| Variable |  Type   |                                   Details                                   |
+----------+---------+-----------------------------------------------------------------------------+
| $index   | number  | iterator offset of the repeated element (0..length-1)                       |
| $first   | boolean | true if the repeated element is first in the iterator.                      |
| $middle  | boolean | true if the repeated element is between the first and last in the iterator. |
| $last    | boolean | true if the repeated element is last in the iterator.                       |
| $even    | boolean | true if the iterator position $index is even (otherwise false).             |
| $odd     | boolean | true if the iterator position $index is odd (otherwise false).              |
+----------+---------+-----------------------------------------------------------------------------+

¹

因此 image 标签可以使用 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/ngRepeat

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，即agular中使用的变量来知道ng-repeat中的索引位置，如果你想了解更多关于ng-repeat的另一个控制变量，请阅读下一个链接中的文档{{3 }}

一个基本的例子是。

CONTROLLER

    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>

检查ng-repeat

3 个答案: