0

i am trying to push a new template into my DOM, but every time i get copy of my previous template. How to push a new copy of template

  $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');
            };

This is how its being rendered in the HTML File.

 <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>
noobie-php
  • 6,817
  • 15
  • 54
  • 101

1 Answers1

1

Not sure what you are trying to achieve here so I might be off but the thing is you are pushing a new template every time these functions are called:

  //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');
            };

If you want this template as a "default" you should move it outside of these functions and place it on a new function and call it with ng-init or something similar.

EDIT:

Now after I see the example, I understand the problem - you are using the same scope variables for the conditions so they are duplicated.

You should add a property like so:

$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');
        };
Ziv Weissman
  • 4,400
  • 3
  • 28
  • 61
  • Yes but you are not clearing personalDetails, so each time you are calling addNew(), you are pushing another add_template – Ziv Weissman May 04 '18 at 07:32
  • Thanks for the reply i created a Plnkr as you suggest, if i go by what you suggest, i cannot add new row. Can you please have a look? https://plnkr.co/edit/is9LpJ7p3GWjXsZJpl5C?p=preview – noobie-php May 04 '18 at 10:50
  • I think I understand your problem now, you mean the conditions are duplicated? that is because you cannot use the same scope variable for it, you can add a property on your main object like in this plunker : https://plnkr.co/edit/mTht5S0M1hPEVLEV2wX2?p=preview – Ziv Weissman May 04 '18 at 11:33
  • Thanks for the update, its almost what i want, just a question, would model bindings lately for such scenario be handled easily? I mean in case i have to fill these with data that come from server, would bindings be done with some modification? or would it require a whole new logic? – noobie-php May 04 '18 at 11:39
  • Also what is difference between `personalDetail.conditions = personalDetail.conditions||[];` and copying a template and then pushing it , some thing like done here https://stackoverflow.com/questions/30813862/ng-repeat-with-empty-objects?rq=1 – noobie-php May 04 '18 at 11:41
  • For the model handling it is the same, you can either do it on server (better) or on client if you must. For the other question, this line is just to make sure there is an array, and you are not pushing on null, you can later use angular.copy instead of creating a new object. – Ziv Weissman May 04 '18 at 11:45
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/170362/discussion-between-noobie-php-and-ziv-weissman). – noobie-php May 04 '18 at 11:47
  • https://stackoverflow.com/questions/50220640/push-values-to-dynamically-created-template-in-angularjs#50220640 Another for you please, if you can answer this – noobie-php May 07 '18 at 18:52
  • sir can you please join me on chat for a while? – noobie-php May 07 '18 at 20:50