如何在ng-repeat中显示元素一次

时间:2015-05-12 15:23:47

标签: angularjs

我需要按价格循环查看订单,一旦价格不存在,我就会显示一条不可用的消息,但我不想为每个空元素显示它。我使用角度1.2

def repeatable_random(seed):
    random.seed(repr(seed))      # Note 'repr' here
    while True:
        yield random.random()

for i, v in zip(range(20), repeatable_random(('Foo', 'Bar'))):
    print((i,v))

4 个答案:

答案 0 :(得分:2)

您可以有条件地显示两个跨度 - 一个是0(您的“不可用”消息),另一个是其他任何内容。

<ul>
  <li ng-repeat="d in newData track by $index">
    <span ng-show="d > 0">{{d}}</span>
    <span ng-show="d === 0">Not Available</span>
  </li>
</ul>

数据可以通过函数传递,以便在第一个之后拉出所有0

  $scope.data = [1,2,3,0,1,0,0,1,0,2]
  $scope.pullDupes = function(array) {
    var newArray = [];
    var zero;
    for(var i = 0; i < array.length; i++) {
      if (array[i] !== 0) {
        newArray.push(array[i])
      }
      if (array[i] === 0 && !zero) {
        zero = true;
        newArray.push(array[i])
      } 
    }
    return newArray;
  }
  $scope.newData = $scope.pullDupes($scope.data);

Plunker

答案 1 :(得分:1)

您只能在此处显示第一条消息:

modules

这里有一个吸食者:

http://plnkr.co/edit/RwZPZp9rFIChWxqF71O7?p=preview

你正在使用它的<div ng-repeat="item in list | orderBy: 'cost'"> <div style="color:red" ng-show="item.cost == 0 && $first">Message Goes Here</div> <hr> <div>{{item.name}} - Price : {{item.cost}}</div> </div> 错误你需要像下次ng-if这样做

干杯!

答案 2 :(得分:1)

这是我能找到的最佳方法。

标记

<div class="sold-out-message" ng-if="displaySoldOutMessage(item)">Sorry, sold out</div>

控制器

$scope.firstSoldOutItemId = false;
$scope.displaySoldOutMessage = function(item) {
   if ( item.cost ) return false;

   $scope.firstSoldOutItemId = $scope.firstSoldOutItemId || item.id;

   return item.id == $scope.firstSoldOutItemId;
};

答案 3 :(得分:0)

你可以尝试使用$ scope。$ whatch这样的布尔变量:

   <div ng-model="actualItem" ng-repeat="item in list | orderBy: 'cost'">
             <div ng-if="cost == 0 && oneMessage == true">Sorry the following are unavailable</div>
                  <div>...my item here...</div>
             <div>
   </div>

在你的控制器中,你看看actualItem:

      $scope.oneMessage = false;
      var cpt = 0; // if 1 so you stop to send message
      $scope.$watch('actualItem',function(value){
    if(value.cost == 0 && $scope.oneMessage == false && cpt < 1) 
      // i don't know what is your cost but value is your actual item 
    {
       $scope.oneMessage = true;
       cpt++;
    } 
    else if($scope.oneMessage == true)
      {
         $scope.oneMessage == false;
      }
  });

我不确定这个,但你可以尝试一下。它当然不是最好的方式。