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定义的特殊变量，位于here。由于 ngIf 接受布尔语句，您可以同时使用逻辑运算符 && 和 ||。

编辑： 如果你没有用 ngRepeat 遍历它而你只想 select 最后一个元素，你可以做类似的事情这到 select 最后一个，如果 isNumber 设置为 true，则使用 ngIf 显示它：

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

编辑 2： 你能 "peek" 下一个元素，看看下一个 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>

说明

显示向下按钮的条件是!$last && items[$index + 1].isNumber。实际上，如果出现以下情况，我们必须显示按钮：

当前项目不是最后一项：!$last
下一个是数字：items[$index + 1].isNumber

请注意，我们可以毫无错误地查看下一个元素，因为我们之前检查过我们不在最后一个项目上。

见demo fiddle

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

AngularJS: ngIf in array of objects with different properties

javascript

angularjs

angular-ng-if