AngularJS:ng-repeat中的条件包装



如果项目具有特定值,我正在尝试将元素包装在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>

假设我想包装类别=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。

只需使用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>

编辑

根据您编辑的问题,这是我所知的最好的。它在上面的代码片段中实现。

<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

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

你不需要额外的div

最新更新