AngularJS中动态删除已创建的重复局部视图

我来帮你搞定这个动态视图删除的问题～ 既然你是用AngularJS动态注入重复的my-custom-row-template，那核心思路就是通过绑定数组来控制视图的增删，因为Angular的双向绑定会自动帮你同步视图和数据。下面是具体的实现方案：

1. 控制器中维护数据数组 #

先在你的Angular控制器里定义一个数组来存储每一行的数据，同时完善新增和删除的方法：

app.controller('YourController', function($scope) {
  // 初始化存储行数据的数组，所有动态行都绑定这个数组
  $scope.rowDataList = [];

  // 原来的添加新行方法，改成往数组里push数据
  $scope.addNew = function() {
    // 可以根据需求传入默认数据，这里用空对象示例
    $scope.rowDataList.push({});
  };

  // 删除指定行的方法，通过索引移除数组元素
  $scope.deleteRow = function(index) {
    $scope.rowDataList.splice(index, 1);
  };
});

2. 修改主视图，用ng-repeat渲染动态行 #

把原来手动注入局部视图的逻辑，改成用ng-repeat遍历数组来渲染，同时在每一行里添加删除按钮：

<section class="main_container">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="panel panel-default">
          <div class="panel-body">
            <form ng-submit="addNew()">
              <!-- 新增按钮，提交表单触发addNew -->
              <button type="submit" class="btn btn-primary">添加新行</button>
              <table class="table table-striped table-bordered">
                <thead>
                  <tr>
                    <th>内容列1</th>
                    <th>内容列2</th>
                    <th>操作</th>
                  </tr>
                </thead>
                <tbody>
                  <!-- 用ng-repeat遍历数组，自动渲染每一行 -->
                  <tr ng-repeat="row in rowDataList track by $index">
                    <!-- 引入你的局部视图，绑定当前行的数据 -->
                    <td colspan="2" ng-include="'my-custom-row-template.html'" ng-model="row"></td>
                    <!-- 删除按钮，点击触发删除方法并传入当前行索引 -->
                    <td>
                      <button type="button" class="btn btn-danger" ng-click="deleteRow($index)">删除</button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

3. 局部视图的小调整 #

确保my-custom-row-template.html里的表单控件绑定到当前行的属性，这样数据能和数组同步：

<!-- my-custom-row-template.html -->
<div class="row">
  <div class="col-md-6">
    <input type="text" ng-model="row.input1" placeholder="输入内容1">
  </div>
  <div class="col-md-6">
    <input type="text" ng-model="row.input2" placeholder="输入内容2">
  </div>
</div>

关键说明 #

• 用track by $index是为了避免数组元素无唯一ID时的Angular报错，如果你有唯一标识字段，也可以换成track by row.id
• 这种方式比手动操作DOM注入视图更符合Angular的设计理念，后续维护起来也更简单

内容的提问来源于stack exchange，提问作者noobie-php