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 on true的对象会在我的数组中。它可以是7或82.没人知道。 isNumber on false的对象也总是在我的数组中。有时，数组只有isNumber为true的对象，而isNumber为false时没有对象。

如何使用ngIf实现此目的？

提前致谢。

更新

我有这样的事情：

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

我不想要＆＃34; Down＆＃34;最后一个元素上的按钮，其值为isNumber属性（在本例中为7）。因为如果用户将其向下移动，我会有：

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

这将是错误的逻辑。

所以，我需要使用ngIf，以便我可以在该元素上禁用此按钮。但有时我可以像这样（没有额外的符号）：

1,2,3,4,5。

在这种情况下，我不需要＆＃34; Down＆＃34;也是最后一个元素的按钮。因为无法移动最后一个元素。

Answer 1

如果您尝试查找它是否为最后一个元素并且如果isNumber设置为true，则可以使用此：

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

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

修改：如果您没有使用ngRepeat对其进行迭代，并且您只想选择最后一个元素，则可以执行以下操作来选择最后一个元素，如果ngIf设置为true，则使用isNumber显示它：

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

编辑2：你可以偷看＆＃34;在下一个元素，看看下一个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 fiddle

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

2 个答案: