Angularjs 第一个ng重复布尔值为true，其余为false

我用的是角度1.5。我有一个带有ng重复的li元素：

<li ng-repeat="contract in vm.contracts.items" contract="contract" change-payment-method-active="vm.changePaymentMethodSssIsActive">
    <contract-timeline-item></contract-timeline-item>
</li>

该代码：

private toggle: boolean = false;

public toggleContract() {
    this.toggle = (this.toggle === true) ? false : true;
}

当用户打开页面时，所有合同的切换布尔值为false，用户可以单击切换按钮打开/关闭这些合同

但是我希望第一个契约的toggle值为true，这样用户就可以看到它

---

我可以通过向合同模型添加一个

toggleStatus

值来解决这个问题，在父容器中，我可以获取合同数组的第一个合同项，并将

toggleStatus

设置为true。但我希望在不更改模型和添加不属于该模型的属性的情况下执行此操作。

您可以在ng if中使用$index将第一项的切换设置为true

<div class="uc-card-datablock" ng-if="vm.toggle || $index == 0">

---

您可以在ng repeat中使用$first。如果该值是循环中的第一个元素，并将其作为组件的参数添加，则该值为真

<li ng-repeat="contract in vm.contracts.items" contract="contract" change-payment-method-active="vm.changePaymentMethodSssIsActive">
<contract-timeline-item toggle='$first'></contract-timeline-item>

---

由于您有单独的指令作用域，您必须传递哪个元素是第一个，您可以这样做

<li ng-repeat="contract in vm.contracts.items" contract="contract" change-payment-method-active="vm.changePaymentMethodSssIsActive">
    <contract-timeline-item is-first="$first"></contract-timeline-item>
</li>

---

为了实现您的目标，您需要以组件应该使用的方式使用组件，即通过绑定传递数据。您将传递您的合同数据以及标志，以告知您是否处理了

合同时间线项目

，哪一个是第一个或不是第一个

它看起来像这样：

class contractTimelineItem {
    private toggle: boolean = false;

    $onInit() {
      this.toggle = this.expanded;
    }

    public toggleContract() {
      this.toggle = !this.toggle;
    }    
  }

bindings: {
  contract: '=',
  expanded: '<'
},

其中，此组件的绑定如下所示：

class contractTimelineItem {
    private toggle: boolean = false;

    $onInit() {
      this.toggle = this.expanded;
    }

    public toggleContract() {
      this.toggle = !this.toggle;
    }    
  }

bindings: {
  contract: '=',
  expanded: '<'
},

绑定：{
合约：“=”，
expanded:“您认为方向正确，但这不起作用。另外，它会抛出语法错误。attr.is-first将仅对第一个元素为true，对其余元素为false，因此toggle boolean设置正确，然后在toggleContract上您只需设置相反的值。我不明白为什么它不起作用？您认为
attr
将从何而来？参考erenceError将被抛出，因为在使用变量之前没有首先定义变量
。attr作为该指令的link函数中的参数传递，返回{link:function（scope，element，attr）{//此处的指令作用域代码}。我想，如果一个人做了一个指令，那么他对使用可以传递给directiveSure的属性有了基本的了解，但OP case中没有链接函数，也没有指令：）试着用代码创建一个演示（别忘了typescript）你会明白我的意思。嗯，这只适用于ng重复项目。我想我应该重新表述我的问题。每个
合同时间线项目都有一个布尔值（布尔值）。它们被设置为false，只有第一个应该为true。因此，这不是关于显示/隐藏，而是将值传递给子组件。我应该如何处理
canBeToggled
？只需将其称为“toggle”，我的错。我将编辑我的答案。干杯！我刚刚看到了这一点。这在Angular 2中更容易工作，但现在我是stu1.5中的ck。我必须将
private expanded:boolean；
添加到我的类中，否则我会得到
TS2339:Property“expanded”在type上不存在的错误。
<li ng-repeat="contract in vm.contracts.items" contract="contract" change-payment-method-active="vm.changePaymentMethodSssIsActive">
  <contract-timeline-item 
    expanded="$first"
    contract="contract"
  ></contract-timeline-item>
</li>