AngularJS：ng-repeat 中的条件换行答案

【问题标题】：AngularJS : conditional wrap in ng-repeatAngularJS：ng-repeat 中的条件换行
【发布时间】：2019-01-27 13:33:25
【问题描述】：

如果项目具有特定值，我会尝试将元素包装在 ng-repeat 循环中。

例如：

items={
  {name:"AAA",cat:"1"},
  {name:"BBB",cat:"2"},
  {name:"CCC",cat:"1"},
  {name:"DDD",cat:"3"}
}
...
<div ng-repeat="item in items">
  {{item.name}}
</div>

将输出：

<div>AAA</div>
<div>BBB</div>
<div>CCC</div>
<div>DDD</div>

假设我想包装 category=1 的项目。所需输出：

<div class="wrapper">
  <div>AAA</div>
</div>
<div>BBB</div>
<div class="wrapper">
  <div>CCC</div>
</div>
<div>DDD</div>

请注意，我的 ng-repeat 中已经有一个过滤器和一个 orderBy，所以不能使用它。有什么建议可以实现吗？

非常感谢

编辑：我不能使用类，我需要一个包装 div。

【问题讨论】：

标签： angularjs angularjs-ng-repeat conditional-statements wrapper

【解决方案1】：

只要使用ng-class就可以做到，如下-

function MainCtrl($scope) {
  $scope.items=[
  {name:"AAA",cat:"1"},
  {name:"BBB",cat:"2"},
  {name:"CCC",cat:"1"},
  {name:"DDD",cat:"3"}
]
 
}

.wrapper {
  background-color : #ccc;  
  width: 10%;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="" ng-controller="MainCtrl as main"> 
  <ul>
     <div ng-repeat="item in items">
  
    <div class="wrapper" ng-if="item.cat ==  1">
      {{item.name}}
    </div>
    <div ng-if="item.cat !=  1">
     {{item.name}}
  </div>  
  </ul>
</div>

编辑：

根据您编辑的问题，这是我所知道的。它在上面的 sn-p 中实现。

 <div ng-repeat="item in items">

        <div class="wrapper" ng-if="item.cat ==  1">
          {{item.name}}
        </div>
        <div ng-if="item.cat !=  1">
         {{item.name}}
      </div>

注意：如果你不想使用Class，可以使用id来完成

【讨论】：

谢谢，但这意味着我必须重复两次实际内容。这里我们有一个简单的 {{item.name}} 但实际上我还有更多......
就其单循环而言，我认为它不会造成任何问题.. 仍然存在不确定性的空间，因此您需要遵循 try and error方法。

【解决方案2】：

<div ng-repeat="item in items" ng-class="{'wrapper' : item.category == 1}">
  {{item.name}}
</div>

你不需要额外的 div

【讨论】：

我编辑了我的问题，我不能使用类，我需要一个包装 div。