Dynamically add elements each time with new scope in angular js

Question

Each time I append an li to my ul i want new id like new_id_(index_number) i.e( id_1, id_2 so on. ). I am using a template to which contains li to be appended , the reason i am using a template because it contains a lot of data like 3-4 forms which has too-many fields. I am using the following code :
My Code Snippet:

<div ng-controller="ContractsController">
 <ul id="contracts">
   <li id="new_{{indx}}"></li>
 </ul>
<button class="add_new" add-contracts>Add New Item</button>
</div>
<script type="text/javascript">

 var app = angular.module('AjApp', []);

 app.controller('ContractsController', function ( $scope ) {
    $scope.indx = 1;
 });

 app.directive('addContracts', function ( $templateRequest, $templateCache, $compile ) {       
    return {
        restrict: 'A',
        scope: true,
        link: function(scope, ele, attr) {

            ele.on("click", function(e) {
                e.preventDefault();
                var $contracts = jQuery("ul#contracts");
                ++scope.indx;

               $templateRequest("add_contracts.html" ).then(function(html){
                  var template = angular.element(html);
                  $contracts.append(template);
                  $compile(template)(scope);
               });


            });
        },
    };
});


</script>

The code is appending the li to the ul but each time I click on Add New Item button all of the li's updated to same id .
What is the problem ? Am I missing something ? Please suggest me a way to solve the problem. Any help will really appreciate. Thanks in advance.

Strille · Accepted Answer · 2016-06-27 07:16:16Z

2

You could create a new child scope for each contract, and each child scope contains its own id.

Also, The logic handled by the add-contracts directive could probably be handled by the controller. That way you don't have to select the div using jQuery("ul#contracts"). In my example I changed it to use a css class, and the selector becomes $element.find('.contracts').

Here's an example:

http://jsfiddle.net/rs1whmo7/

answered Jun 27, 2016 at 7:16

Strille

5,7913 gold badges28 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nand Kishor Over a year ago

It's perfectly what i want. Thank a lot. :)

Tushar Arora · Accepted Answer · 2016-06-27 06:50:44Z

1

Use ++scope.$parent.indx instead of ++scope.indx

answered Jun 27, 2016 at 6:50

Tushar Arora

1,1462 gold badges10 silver badges22 bronze badges

2 Comments

Nand Kishor Over a year ago

Not a luck, same result. all of the id's of li updating to new id

Tushar Arora Over a year ago

Can you please share add_contracts.html file?

Piyush.kapoor · Accepted Answer · 2016-06-27 06:49:23Z

0

USe scope false instead of true

app.directive('addContracts', function ( $templateRequest, $templateCache, $compile ) {
return { restrict: 'A', scope: false, link: function(scope, ele, attr) {

        ele.on("click", function(e) {
            e.preventDefault();
            var $contracts = jQuery("ul#contracts");
            ++scope.indx;

           $templateRequest("add_contracts.html" ).then(function(html){
              var template = angular.element(html);
              $contracts.append(template);
              $compile(template)(scope);
           });


        });
    },
};

});

OR If you still want to inherit from parent scope keep the index in an object

div ng-controller="ContractsController">
 <ul id="contracts">
   <li id="new_{{count.indx}}"></li>
 </ul>
<button class="add_new" add-contracts>Add New Item</button>
</div>
<script type="text/javascript">

 var app = angular.module('AjApp', []);

 app.controller('ContractsController', function ( $scope ) {
    $scope.count = {
    indx = 1;
}
 });

 app.directive('addContracts', function ( $templateRequest, $templateCache, $compile ) {       
    return {
        restrict: 'A',
        scope: true,
        link: function(scope, ele, attr) {

            ele.on("click", function(e) {
                e.preventDefault();
                var $contracts = jQuery("ul#contracts");
                scope.count.indx +=1;

               $templateRequest("add_contracts.html" ).then(function(html){
                  var template = angular.element(html);
                  $contracts.append(template);
                  $compile(template)(scope);
               });


            });
        },
    };
});

answered Jun 27, 2016 at 6:49

Piyush.kapoor

6,8311 gold badge25 silver badges21 bronze badges

6 Comments

Nand Kishor Over a year ago

Not working, same result. all of the id's of li updating to new id

Piyush.kapoor Over a year ago

well what is happening everytime u click on addContacts scope value gets incremented and that get reflected in all the templates

Piyush.kapoor Over a year ago

instead of doing like it you can make an array, and do ng-repeat from ng-repeat which you will get $index .Every time you click on add push in that array

Nand Kishor Over a year ago

can you please show me a working example on fiddle or js etc. ?

Piyush.kapoor Over a year ago

will take time ,will do it

|

Collectives™ on Stack Overflow

Dynamically add elements each time with new scope in angular js

3 Answers 3

1 Comment

2 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related