Question

我使用Angular 1.5。我有一个带有ng-repeat的li元素：

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

li元素内部是contract-timeline-item组件。

每个contract-timeline-item组件都是他的html：

<div id="toggleContract"><button ng-click="vm.toggleContract()">Toggle contract</button></div>
<div class="uc-card-datablock" ng-if="vm.toggle">

这段代码：

private toggle: boolean = false;

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

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

但我希望第一份合约的切换值为真，以便用户可以看到。

我可以通过向合同模型添加toggleStatus值来解决这个问题，在父容器中我可以获取合同数组的第一个合同项并将toggleStatus设置为true。但是我希望在不改变模型和添加不属于该模型的属性的情况下这样做。

Answer 1

为了在你需要按照它们应该使用的方式使用组件之后实现你的目标，即在via bindings中传递数据。您将传递合同数据以及标志，告诉您处理contract-timeline-item的天气，这是第一个与否。

看起来像这样：

class contractTimelineItem {
    private toggle: boolean = false;

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

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

此组件的绑定如下所示：

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

然后HTML部分需要这样：

<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>

以下是演示：http://plnkr.co/edit/9v8xdl7YR4oBYt3Bjgf3?p=preview

Answer 2

你可以在ng-if中使用$ index来设置第一项的切换为真

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

Answer 3

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

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

Answer 4

由于你有单独的指令范围，你必须传递哪个元素是第一个，你可以这样做

lets users = ["John" : 36, "James": 12, "Liam": 30]

现在要在范围代码中使用它，请执行此操作 -

<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>

首先ng-repeat布尔值为true，其余为false

4 个答案: