How to dynamically add element with data binding

Question

All:

I am pretty new to AngularJS, my question is how to dynamically add elements to page within a scope.

Like:

<div id="cnt" ng-controller="main">
    <button>Add more</button>
</div>

<script>
  app.controller("main", function($scope){
        $scope.name = "hello";
  });

$("button").on("click", function(){
  var div = $("#cnt").append("div");
  div.html("{{name}}");
});
</script>

What It is supposed to happen is the newly added div will have the name auto binded( shown as "hello"). But when I click the button, it only add more div with "{{name}}" in it.

I wonder what is the best way to do this?

Kousha · Accepted Answer · 2014-11-13 18:12:39Z

1

Why don't you use ng-repeat? You most likely have a very structured element that needs to be dynamically added. Also, you should use ng-click instead of binding to the DOM $(button). What happens when you have two buttons serving two different purpose?

So your HTML would be:

<div id="cnt" ng-controller="main">
    <button ng-click="addMore()">Add more</button>

    <div ng-repeat="element in elements track by $index">
        <h1>{{ element.title }}</h1>
        <p>{{ element.body }}</p>
    </div>
</div>

Then your app would be:

app.controller("main", function($scope) {
    // Initialize the variable as an empty array
    $scope.elements = [];

    // Instead of binding to the button selector, use `ng-click`
    // in your HTML and add the function here
    $scope.addMore = function() {

        // Create a new object with whatever attributes you need 
        var element = {
            title: 'Element Title',
            body: 'Hello World!'
        }
        // Push it to the $scope.elements array
        // ng-repeat will loop through all the elements in the array 
        // It's just like foreach()
        $scope.elements.push(element);
    }
});

answered Nov 13, 2014 at 18:12

Kousha

36.7k60 gold badges191 silver badges319 bronze badges

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

4 Comments

Kuan Over a year ago

Thanks for help. Actually I am not gonna add a lot of divs, the code above is just for test purposes, the only thing I want to figure out is how to dynamically bind data to newly added element within certain scope and Coule you tell me why the way I use not work? Thanks!

Kousha Over a year ago

The way you used does work, it's just not the Angular way - actual DOM manipulation is the jQuery way which is considered bad. I suggest you read this page: stackoverflow.com/questions/14994391/…

Kousha Over a year ago

Furthermore, using ng-repeat just makes it a whole lot easier to work it. It has cleaner syntax. And most importantly, when you want to remove DOMs, instead of finding out which DOM you need to remove, you just have to splice that element from the array and voila, you have removed something!

Kuan Over a year ago

thanks, I will read that post. But I wonder how can you make my code works, on my side, the newly added element can not show "hello"

Collectives™ on Stack Overflow

How to dynamically add element with data binding

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related