AngularJS: ngIf在具有不同属性的对象数组中

Question

我对ngIf指令有一些问题。我尝试了很多方法来解决它，但不幸的是失败了。

我有一个具有不同属性的对象数组。像这样:

    object = [
    {
        name: "1",
        isNumber: true,
    },
    {
        name: "2",
        isNumber: true,
    },
    {
        name: "3",
        isNumber: true,
    },
    {
        name: "4",
        isNumber: true,
    },
    {
        name: "5",
        isNumber: true,
    },
    {
        name: "#",
        isNumber: false,
    },
    {
        name: "*",
        isNumber: false,
    }

我需要在最后一个isNumber属性为真值的对象上使用ngIf。我不知道数组中有多少isNumber为true的对象。可以是7或82。没有人知道。另外，isNumber为false的对象不会总是在我的数组中。有时数组中只有isNumber为true的对象，没有isNumber为false的对象。

我如何使用ngIf实现这一点?

提前感谢。

更新:

我有这样的东西:

1, 2, 3, 4, 5, 6, 7， *， #.

我不想在最后一个元素上有"Down"按钮，isNumber属性的真值(在本例中为7)。因为如果用户把它往下移动，我会得到这个:

1,2,3,4,5,6， *， 7， #。

这将是错误的逻辑。

我需要使用ngIf，这样我就可以在那个元素上禁用这个按钮。但有时我也可以这样写(没有额外的符号):

1、2、3、4、5.

在这种情况下，我也不需要在最后一个元素上设置"Down"按钮。因为最后一个元素不可能下移

Answer 1

如果你想找到它是否是最后一个元素，如果isNumber被设置为true，你可以使用这个:

<span ng-repeat="item in items" ng-if="item.isNumber && $last">

$last是通过ngRepeat定义的特殊变量，位于这里。由于ngIf接受布尔语句，因此可以同时使用&&和||逻辑操作符。

Edit:如果你不想用ngRepeat遍历它，你只想选择最后一个元素，你可以这样做，选择最后一个，然后使用ngIf来显示它，如果isNumber设置为true:

<span ng-bind="list[list.length - 1]" ng-if="list.isNumber">

编辑2:你能"偷看"下一个元素，看看下一个isNumber是否被设置为false?这样的:

<span ng-repeat="...">
   <span ng-if="!list[$index + 1].isNumber"></span>
</span>

像$last一样，我使用一个名为$index的特殊变量来转到ngRepeat中的下一个元素。(不确定Angular是否会自动检查越界错误，或者是否会抛出错误)

Answer 2

你最初的问题有点令人困惑，但多亏了编辑，我想我明白你需要什么。通过将$index与$last结合使用，您可以以一种简单的方式实现您想要做的事情:

<div ng-repeat="item in items">
    {{item.name}}
    <button ng-if="!$last && items[$index + 1].isNumber">Down</button>
</div>

显示Down按钮的条件是!$last && items[$index + 1].isNumber。确实，如果:

我们必须显示按钮:

• 当前项不是最后一项:!$last

• 下一个是数字:items[$index + 1].isNumber

请注意，我们可以在没有错误的情况下偷看下一个元素，因为我们之前检查过，我们不是在最后一项。

参见demo小提琴