Angular 1.5实现首个ng-repeat项默认展开（不修改模型）

嘿，这个需求很常见，我有几个完全不需要修改contract模型的方案，你可以根据项目情况选择：

方案一：利用ng-repeat的$index传递首个标识（推荐） #

这个方案通过组件间的输入属性传递"是否为第一个合约"的状态，完全不侵入原模型，而且逻辑清晰：

步骤1：修改父组件的ng-repeat模板 #

给contract-timeline-item组件添加一个is-first属性，绑定到$index === 0（判断当前项是否是列表中的第一个）：

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

步骤2：更新子组件的绑定与初始化逻辑 #

在contract-timeline-item组件的定义中，新增对isFirst属性的绑定，并在初始化钩子中判断是否为第一个合约，设置默认展开：

angular.module('yourAppModule').component('contractTimelineItem', {
  bindings: {
    contract: '<',
    isFirst: '<', // 新增输入绑定
    changePaymentMethodActive: '<' // 保留原有的绑定
  },
  templateUrl: 'path/to/contract-timeline-item.html',
  controller: function() {
    const vm = this;
    vm.toggle = false;

    // 组件初始化时执行
    vm.$onInit = function() {
      // 如果是第一个合约，默认展开
      if (vm.isFirst) {
        vm.toggle = true;
      }
    };

    vm.toggleContract = function() {
      vm.toggle = !vm.toggle;
    };
  }
});

为什么这个方案好用？ #

• 完全不修改contract模型，符合你的要求
• 组件间的状态传递清晰，耦合度低
• 用户后续的展开/收起操作依然独立，不会互相影响

方案二：父组件控制首个状态（适合需要统一管理的场景） #

如果后续需要在父组件中控制首个合约的展开状态，可以在父组件中维护一个变量，然后传递给子组件：

步骤1：父组件添加状态变量 #

// 父组件控制器
vm.firstContractExpanded = true;

步骤2：模板绑定 #

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

步骤3：子组件接收并初始化 #

// 子组件绑定
bindings: {
  // ... 原有绑定
  initialToggle: '<'
},
// 初始化
vm.$onInit = function() {
  vm.toggle = vm.initialToggle || false;
};

这个方案的优势是可以在父组件中动态控制首个合约的初始状态，比如根据业务逻辑决定是否默认展开。

内容的提问来源于stack exchange，提问作者Peter Boomsma