AngularJS ng-repeat 的 OrderBy 布尔值 [英] OrderBy boolean value with AngularJS ng-repeat

问题描述

我希望能够根据变量的真假进行排序.

假设我们有一个像这样的变量:

groups = {{名称:'第一个'，值:真}，{名称:'秒'，值:假}，{名称:'第三'，值:真}，{名称:'第四'，值:假}}

我们可以像这样循环遍历它:

{{group.name}} {{group.value}}

这将为您提供以下信息:

第一个为真第二个假第三个真第四个假

但如果我想按布尔值排序，那么我可以这样做:

{{group.name}} {{group.value}}
<div ng-repeat="分组 | filter:{value:false}">{{group.name}} {{group.value}}

这会给我以下输出(我想要的):

第一个为真第三个真第二个假第四个假

有没有办法在单个 ng-repeat 中使用 orderBy 或 filter 来做到这一点?

解决方案

orderBy 接受布尔值并按布尔值排序.

通过'group'的'value'属性对重复元素进行排序:

ng-repeat="分组 | orderBy: 'value'"

这将颠倒顺序:

ng-repeat="分组 | orderBy: '-value'"

如果您还想按 'group' 的 'name' 属性排序:

ng-repeat="分组分组 | orderBy: ['value','name']"

I'd like to be able to sort by whether a variable is true or false.

Let's say we have a variable like so:

groups = {
    { name: 'first', value: true },
    { name: 'second', value: false },
    { name: 'third', value: true },
    { name: 'fourth', value: false }
}

And we can loop through it like so:

<div ng-repeat="group in groups">
    {{group.name}} {{group.value}}
</div>

Which will give you the following:

first true
second false
third true
fourth false

But if I wanted to sort by a boolean value then I could do this:

<div ng-repeat="group in groups | filter:{value:true}">
    {{group.name}} {{group.value}}
</div>
<div ng-repeat="group in groups | filter:{value:false}">
    {{group.name}} {{group.value}}
</div>

Which would give me the following output (which I want):

first true    
third true
second false
fourth false

Is there a way to do this using orderBy or filter in a single ng-repeat?

解决方案

orderBy accepts and sorts by booleans.

Order the repeated element by the the 'value' property of 'group':

ng-repeat="group in groups | orderBy: 'value'"

This will reverse the order:

ng-repeat="group in groups | orderBy: '-value'"

If you would like to also sort by the 'name' property of 'group':

ng-repeat="group in groups | orderBy: ['value','name']"

这篇关于AngularJS ng-repeat 的 OrderBy 布尔值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！