检查 ng-repeat 中的条件

Question

我正在用 ionic /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

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

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

Answer 3

一种实现方式是使用ng-click to execute javascript (e.g. inline or call a function in the controller scope. Per the documentation for ngRepeat $index 可以参考当前索引：

Special properties are exposed on the local scope of each template instance, including:

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

检查 ng-repeat 中的条件

checking the condition in ng-repeat

javascript

angularjs

json

angularjs-ng-repeat

ng-repeat