检查 ng-repeat 中的条件答案

【问题标题】：checking the condition in ng-repeat检查 ng-repeat 中的条件
【发布时间】：2017-02-02 16:20:01
【问题描述】：

我正在 ionic /angularjs 中创建应用程序。

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

例如：假设我显示亚马逊的图像（在后台 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>

这是输出：

【问题讨论】：

你能提供一个 JSON 文件的样本吗？
查看网址tools.vcommission.com/api/…

标签： javascript angularjs json angularjs-ng-repeat ng-repeat

【解决方案1】：

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

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

+----------+---------+-------------- -------------------------------------------------- --+
|变量 |类型 |详情 |
+----------+---------+-------------- -------------------------------------------------+
| $索引 |号码 |重复元素的迭代器偏移量 (0..length-1) |
|第一美元 |布尔值 |如果重复元素在迭代器中是第一个，则为 true。 |
| $中 |布尔值 |如果重复元素在迭代器中的第一个和最后一个之间，则为 true。 |
| $最后 |布尔值 |如果重复元素是迭代器中的最后一个元素，则为 true。 |
| $ 偶数 |布尔值 |如果迭代器位置 $index 为偶数，则为 true（否则为 false）。 |
| $奇数 |布尔值 |如果迭代器位置 $index 为奇数，则为 true（否则为 false）。 |
+----------+---------+-------------- -------------------------------------------------+

所以 image 标签可以具有属性 ng-click 来利用该指令，如下所示：

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

然后使用Array.filter() 将所有报价过滤到与报价名称匹配的报价过滤数组中：

$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

【讨论】：

它仍然没有在我的交易页面上显示结果..提前谢谢
它改变了索引，但值没有在下一页传递，也没有显示在那个页面上..
Offer_name 即将到来，但它现在通过 url 传递，并且不会显示在交易页面及其离子应用程序上
它也显示结果，但在同一页面上而不是在交易页面上请更新谢谢
我对路线做了一些更改，现在看起来像这样 -localhost:8100/#/Deals/Tatacliq.com%20CPS%20-%20India

【解决方案2】：

您可以使用 $index，即 agular 中使用的变量来了解 ng-repeat 中的索引位置，如果您想了解更多关于 ng-repeat 的另一个控制变量的信息，请阅读下一个链接中的文档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>

【讨论】：

如果数据来自 url

【解决方案3】：

乍一看你从来没有调用过 $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>

【讨论】：