如何使用动态模板创建动态ng模型绑定

Question

以下是我动态创建的模板，它有一个问题，当我添加我的模板时，它会带来前一个DOM的值。我想把新的空虚在哪里。

以下是我的HTML文件，my-custom-row-template是我重复模板的地方，现在我假设$index将创建一个新索引，而值/ DOM不会重复。

<section class="main_container">
        <div class="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()">
                                    <table class="table table-striped table-bordered">
                                        <thead>
                                        <tr>
                                            <th><input type="checkbox" ng-model="selectedAll" ng-click="checkAll()"/></th>
                                            <th scope="col">Setup Responses</th>
                                            <th>Add Condition</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr ng-repeat="personalDetail in personalDetails">
                                            <td scope="col">
                                                <input type="checkbox" ng-model="personalDetail.selected"/>
                                            </td>
                                            <td scope="col" class="col-xs-10">

                                                <div ng-repeat="condition_set in conditions track by $index" my-custom-row-template></div>
                                            </td>
                                            </td>
                                            <td scope="col">

                                                <input type="button" value="Add Condition" ng-click="addCondition()"
                                                       class="btn btn-primary addnew"/>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>

                                    <div class="form-group">
                                        <input ng-hide="!personalDetails.length" type="button"
                                               class="btn btn-danger pull-right"
                                               ng-click="remove()" value="Remove">
                                        <input type="button" class="btn btn-primary addnew pull-right" value="Add New" ng-click="addNew()">
                                        <input type="submit" class="btn btn-primary pull-right" value="Save">
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    </span>

这是我的模板代码

<div class="col-xs-8 pull-left">
    <div class="row form-group">
        <!--<select ng-model="response.condition" style="color: black;">-->
        <!--<option>Response Message</option>-->
        <!--<option>IF</option>-->
        <!--<option>Else</option>-->
        <!--</select>-->
        <select ng-model="selectedCondition[$index]">
            <option ng-repeat="x in conditions.condition_set" value="{{x.name}}">{{x.value}}</option>
        </select>

        <input ng-show="selectedCondition=='0'" type="text" class="form-control"
               ng-model="personalDetail[$index].message"/>
        <input ng-show="selectedCondition=='1'" type="text" class="form-control"
               ng-model="conditions[$index].response"/>
        <input ng-show="selectedCondition=='2'" type="text" class="form-control"
               ng-model="conditions[$index].elseMessage"/>
        <select ng-show="selectedCondition=='1'" ng-model="goToStepOrNew">
            <option ng-repeat="x in conditions[$index].create_new_conditions" value="{{x.name}}">{{x.value}}</option>
        </select>

        <input type="button" value="Remove Condition" ng-click="remove_condition($index)" class="btn btn-danger"/>
    </div>

</div>

这就是我在我的控制器中处理它的方式

$http({
                method: "POST",
                url: "team_lead_showed_contacts/ajax",
                data: $.param(obj),
                headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'},
                transformResponse: [function (data) {
                    var str = '';
                    str = data.toString();
                    str = str.replace(/\\/g, 0);
                    return str;
                }]
            }).then(function (response) {
                //debugger;

                $scope.campaigns = JSON.parse(response.data);
                $scope.personalDetails = [
                    {
                        'add_tempalte': '<div my-custom-row-template> </div>',
                    }
                ];

                $scope.addNew = function (personalDetail) {
                    $scope.personalDetails.push({
                        'add_template': '<div my-custom-row-template> </div>',
                    });
                };


                function triggerNewRow($scope) {
                    if ($scope.goToStepOrNew == 0) {

                    }
                }

                $scope.remove = function () {
                    var newDataList = [];
                    $scope.selectedAll = false;
                    angular.forEach($scope.personalDetails, function (selected) {
                        if (!selected.selected) {
                            newDataList.push(selected);
                        }
                    });
                    $scope.personalDetails = newDataList;
                };

                $scope.checkAll = function () {
                    if (!$scope.selectedAll) {
                        $scope.selectedAll = true;
                    } else {
                        $scope.selectedAll = false;
                    }
                    angular.forEach($scope.personalDetails, function (personalDetail) {
                        personalDetail.selected = $scope.selectedAll;
                    });
                };


                $scope.conditions = [];
                $scope.conditions.push('myCustomRowTemplate');
                $index = 0;
                $scope.addCondition = function () {
                    $scope.conditions.push('myCustomRowTemplate');
                };
                $scope.conditions.condition_set = [
                    {name: 0, value: 'Response Message'},
                    {name: 1, value: 'IF'},
                    {name: 2, value: "ELSE"}
                ];
                $scope.conditions.create_new_conditions = [
                    {name: 0, value: 'Create Step'},
                ];
                $scope.remove_condition = function (element) {
                    $scope.conditions.splice(element, 1);
                    // console.log(element);
                };

            });

作为参考我附上一张图片来概述当我复制添加新内容时会发生什么。已存在的元素的副本被推入DOM。

修改 在Kinda same issue like this post之后尝试了类似这样的事情 但没有效果。

$scope.personalDetails = [
                        {
                            'add_template': '<div my-custom-row-template> </div>',
                        }
                    ];
                    var newStep = angular.copy($scope.personalDetails);
                    $scope.addNew = function (personalDetail) {

                        $scope.personalDetails.push(
                            newStep
                        );
                    };