【问题标题】：How to stop repeating ng-repeat on the last item displayed?如何停止在显示的最后一个项目上重复 ng-repeat？
【发布时间】：2018-02-12 18:17:53
【问题描述】：

所以我有一个以 ng-if 为条件的 ng-repeat。

这就是div

<div class="fav-prod-customised>
    <p ng-repeat="ingredient in product.options"
         ng-if="ingredient.default_quantity == 0 && 
         ingredient.entry.quantity > 0">
                              {[{ingredient.entry.full_name}]}
         <span ng-if="!$last">,</span>
    </p> . 
</div>`

在每种成分之后我想要一个逗号，直到我不想要逗号的最后一种成分。 '$last' 属性不起作用，因为最后显示的项不是数组中的最后一项。

我该如何解决？

【问题讨论】：

试试这个stackoverflow.com/questions/14198017/…

标签： html css angularjs

【解决方案1】：

将`ng-repeat` 中的`ng-if` 替换为自定义过滤器：

创建custom filter：

app.filter("myFilter", function() {
  return function (list) {
    return list.filter(function(item) {
       return item.default_quantity == 0 && 
              item.entry.quantity > 0;
    });
  };
})

使用该过滤器而不是使用ng-if 指令：

   <p ng-repeat="ingredient in product.options | myFilter">
      {{ingredient.entry.full_name}} {{$last}}
         <span ng-hide="$last">,</span>
   </p> .

这种技术更有效，因为它避免了为每个ng-if 添加观察者和子作用域。 $last 和 ng-repeat 指令的其他特殊属性也将按预期工作。

The DEMO

angular.module("app",[])
.filter("myFilter", function() {
  return function (list) {
    return list.filter(function(item) {
       return item.default_quantity == 0 && 
              item.entry.quantity > 0;
    });
  };
})

.controller("ctrl", function($scope) {
  var vm=$scope;
  vm.product = { options: [
    { default_quantity: 0,
      entry: { quantity: 4, full_name: "fullname0"}
    },
    { default_quantity: 0,
      entry: { quantity: 4, full_name: "fullname1"}
    },
    { default_quantity: 1,
      entry: { quantity: 4, full_name: "fullname2"}
    },
    ]
  };
})

<script src="//unpkg.com/angular/angular.js"></script>
  <body ng-app="app" ng-controller="ctrl">
    GOOD
    <p ng-repeat="ingredient in product.options | myFilter">
      {{ingredient.entry.full_name}} {{$last}}
         <span ng-hide="$last">,</span>
    </p> .
    <hr>BAD
    <p ng-repeat="ingredient in product.options"
         ng-if="ingredient.default_quantity == 0 && 
         ingredient.entry.quantity > 0">
      {{ingredient.entry.full_name}} {{$last}}
         <span ng-hide="$last">,</span>
    </p> .
  </body>

【讨论】：

【解决方案2】：

使用三元，{{$last ? '' : ', '}}:

<div class="fav-prod-customised">
    <p ng-repeat="ingredient in product.options" 
       ng-if="ingredient.default_quantity == 0 && ingredient.entry.quantity > 0">
        {[{ingredient.entry.full_name}]}
        {{$last ? '' : '<span>, </span>'}}
    </p> 
</div>

【讨论】：

你没有复制/粘贴我修改的代码吗？第一个 div 缺少关闭 " 和 >。
我已经更正了 html 错误，但仍然无法正常工作

将ng-repeat 中的ng-if 替换为自定义过滤器：

The DEMO

将`ng-repeat` 中的`ng-if` 替换为自定义过滤器：