时间戳

首页 > 解决方案 > 如何在AngularJS中推送新模板，每次都会渲染旧模板

angularjs - 如何在AngularJS中推送新模板，每次都会渲染旧模板

问题描述

我正在尝试将一个新模板推送到我的 DOM 中，但每次我得到我以前的模板的副本。如何推送模板的新副本

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

这就是它在 HTML 文件中的呈现方式。

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

标签： angularjs

解决方案

不确定您要在这里实现什么，所以我可能会离开，但问题是每次调用这些函数时您都在推送一个新模板：

  //Calling addNew() - will add to personalDetails array again every click
  $scope.addNew = function (personalDetail) {
                //You can add:
                $scope.personalDetails = [];

                $scope.personalDetails.push({
                    'add_template': '<div my-custom-row-template> </div>',
                });
            };
            //$scope.conditions = []; - move it inside the function
            $scope.conditions.push('myCustomRowTemplate');

            //Same with this function - each time it is called you are pushing a new condition, you should clear that too
            $scope.addCondition = function () {
                $scope.conditions = [];
                $scope.conditions.push('myCustomRowTemplate');
            };

如果你希望这个模板作为“默认”，你应该把它移到这些函数之外，并将它放在一个新函数上，然后用 ng-init 或类似的东西调用它。

编辑：

现在，在我看到这个例子之后，我明白了这个问题——你对条件使用了相同的范围变量，所以它们是重复的。

您应该像这样添加一个属性：

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

        $scope.addCondition = function(personalDetail) {
         personalDetail.conditions = personalDetail.conditions||[]; //init new array if needed
         personalDetail.conditions.push('myCustomRowTemplate');
        };

推荐阅读