How to dynamic add new element in Angularjs

Question

I have a ng-repeat to loop my object value to view. Then I want to have a button to add new blank element to the last of ng-repeat value.

How can I do this in angular?

My data is json object. I tried

In controller
$scope.objs = {'a': 'a', 'b':'b'};

In view
{{Object.keys(objs).length}};
But nothing show in view.

Update

<div ng-repeat="docstep in docs.docsteps" class="docstep">
   {{docstep.text}}
</div>

Then I want to get the length of objects so I can .length + 1 in the button click But I have no idea how to get objects length. Or is there any better idea?

Do you have an object docs that is an array of objects in a property docsteps? — mitch
– mitch, Commented Aug 8, 2013 at 18:13

AlwaysALearner · Accepted Answer · 2013-08-08 20:08:03Z

1

Bind a click handler to the button using ng-click:

<div ng-repeat="docstep in docs.docsteps" class="docstep">
   <input type="text" value="{{docstep.text}}">
</div>
<button ng-click="addNew()">Add another input</button>
When this button is clicked. It will add another blank input
<br>Which the new input will be docstep3

This is how your JS should look:

var myApp = angular.module('myApp',[]);
myApp.run(function($rootScope){

    $rootScope.docs = {
        "docsteps" : {
            "docstep1" : {
               "text" : "a"
            },
            "docstep2" : {
               "text" : "b"
            }
        }

    }

    var c = 2; 
    $rootScope.addNew = function(){
        count++;
        $rootScope.docs.docsteps["docstep"+count] = {"text":count}
    }
});

NOTE: You should use ng-app to define work area for angular and use controllers to reside the models(docs) and define the behaviour of your view (addNew).

edited Aug 8, 2013 at 20:08

answered Aug 8, 2013 at 19:09

AlwaysALearner

43.9k9 gold badges98 silver badges78 bronze badges

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

6 Comments

vzhen Over a year ago

docstep1, docstep2 will be random in real data. I just hard code for testing purpose. By the way, is that possible to check the length in view?

AlwaysALearner Over a year ago

@vzhen You need to loop over the object to know the length.

vzhen Over a year ago

I　looped. But I have no idea how to get the length of objects. There is not array. I tried {{Object.keys(docs).length}} but not working.

AlwaysALearner Over a year ago

If lets say you have docstep1 and docstep2 in docsteps then what do you expect? length = 2? In the above code, c points to the length of the object you see. You don't need to loop over the object. Still if you wish to loop over it then you can have a look here: stackoverflow.com/questions/5223/…

vzhen Over a year ago

the docstep1 and docstep2 are just testing data. In real life, i cannot know how many docsteps will be there. So I have to loop over it and know length. The example you gave is associate array.

|

mitch · Accepted Answer · 2013-08-08 18:22:37Z

0

I took your ng-repeat and made it work. Notice I put your object in the $rootScope but you can apply the same object to any scope that your ng-repeat is in.

JS

var myApp = angular.module('myApp',[]);
    myApp.run(function($rootScope){
    $rootScope.docs={docsteps:[{text:'A'},{text:'B'},{text:'C'}]};
});

JSFIDDLE: http://jsfiddle.net/mac1175/Snn9p/

answered Aug 8, 2013 at 18:22

mitch

1,83115 silver badges14 bronze badges

1 Comment

vzhen Over a year ago

I modified your fiddle to my actual data and tell what I want. Please check it out. jsfiddle.net/EvsGw/2

Collectives™ on Stack Overflow

How to dynamic add new element in Angularjs

2 Answers 2

6 Comments

JS

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

JS

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related