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, Aug 08 '13 at 18:13
where's the fiddle, remember to explain your question correctly and clearly! — Huei Tan, Oct 07 '13 at 03:13

AlwaysALearner · Answer 1 · 2013-08-08T20:08:03.860

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 08 '13 at 20:08

answered Aug 08 '13 at 19:09

AlwaysALearner

43,759
9
96
78

`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? – vzhen Aug 10 '13 at 09:45
@vzhen You need to loop over the object to know the length. – AlwaysALearner Aug 10 '13 at 09:59
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. – vzhen Aug 10 '13 at 11:16
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: http://stackoverflow.com/questions/5223/length-of-javascript-object-ie-associative-array – AlwaysALearner Aug 10 '13 at 11:36
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. – vzhen Aug 10 '13 at 11:41
Objects and Associative arrays are all same in JS. – AlwaysALearner Aug 10 '13 at 11:43

score 0 · Answer 2 · answered Aug 08 '13 at 18:22

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 08 '13 at 18:22

mitch

1,821
14
14

I modified your fiddle to my actual data and tell what I want. Please check it out. http://jsfiddle.net/EvsGw/2/ – vzhen Aug 08 '13 at 18:42

How to dynamic add new element in Angularjs

2 Answers2

JS