0

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?

  • Is that all of your view code or is there more? – Mike Robinson Aug 8 '13 at 17:58
  • what does your ng-repeat look like? – mitch Aug 8 '13 at 17:59
  • @MikeRobinson I updated the question – vzhen Aug 8 '13 at 18:09
  • @mitch I updated the question – vzhen Aug 8 '13 at 18:10
  • 1
    @sza fiddle added, please check answer's comment – vzhen Aug 8 '13 at 18:50
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/

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

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

  • 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 9:45
  • @vzhen You need to loop over the object to know the length. – AlwaysALearner Aug 10 '13 at 9: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: resolved-error.com/questions/5223/… – 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

Your Answer

By clicking "Post Your Answer", you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.