AngularJS实现点击按钮动态添加ng-repeat渲染的通知类型列表

嘿，我来帮你搞定这个AngularJS的列表需求！按照你的要求，我把实现方案拆成控制器逻辑和HTML模板两部分，保证每次点击Add都能新增带默认值的列表，按钮还会自动跟到新列表旁边~

1. 编写AngularJS控制器 #

首先我们需要在控制器里维护一个数组，用来存储所有的通知列表。每个列表项都包含一个存着三个默认值的数组，点击Add按钮时就往这个大数组里push一个新的默认列表项。

angular.module('notificationApp', [])
  .controller('NotificationController', function($scope) {
    // 初始化第一个带默认值的列表
    $scope.notificationLists = [
      {
        types: ['通知类型1', '通知类型2', '通知类型3']
      }
    ];

    // 新增列表的方法
    $scope.addNewList = function() {
      // 每次新增都带上三个默认值
      $scope.notificationLists.push({
        types: ['通知类型1', '通知类型2', '通知类型3']
      });
    };
  });

2. 构建HTML模板 #

用嵌套的ng-repeat来渲染列表：外层遍历所有通知列表，内层遍历每个列表里的三个默认值。然后利用AngularJSng-repeat自带的$last属性，让Add按钮只出现在最后一个列表的旁边——这样每次新增后，按钮自然就移到新列表旁边了。

<div ng-app="notificationApp" ng-controller="NotificationController">
  <div ng-repeat="list in notificationLists">
    <ul>
      <li ng-repeat="type in list.types">{{ type }}</li>
    </ul>
    <!-- 只有最后一个列表旁显示Add按钮 -->
    <button ng-if="$last" ng-click="addNewList()">Add</button>
  </div>
</div>

核心逻辑说明 #

• notificationLists数组：作为所有列表的容器，每一项都是独立的列表对象，保证每个新增列表都有自己的默认值集合，不会互相干扰。
• 嵌套ng-repeat：外层负责渲染整个列表块，内层渲染每个列表里的三个通知类型，完美实现同款列表的重复渲染。
• $last判断：这是AngularJS为ng-repeat提供的特殊变量，用来标记当前项是否是数组的最后一项。用ng-if="$last"控制按钮显示，就能让按钮始终跟着最新的列表走。

这样运行起来，默认会显示第一个带三个值的列表，点击Add就会新增一模一样的列表，按钮自动移到新列表旁边，重复点击可以无限循环新增~

内容的提问来源于stack exchange，提问作者Sachin HR