angularjs data binding with dynamically created elements

Question

I have this code in my application:

$scope.appendBets = function()
{
    $.each($scope.phaseBets, function(i, bet)
    {
        var betElement = angular.element('<div ng-model="phaseBets[i]">Bet id: {{phaseBets[i].id}}</div>');
        angular.element(document.querySelector('#betsHolder')).append(betElement);
        $compile(betElement)($scope);
    });
}

the $scope.phaseBets is loaded from $http.get.

Now the problem is that the {{phaseBets[i].id}} content not seen on the html page, I am getting this Bet id:.

I have seen this OS but it's not working for me, maybe because of the array. Is there anything wrong with my code?

Note
The thing is that by the I'd I will create an element (different for each id) so ng-repeat not helping that mutch.

Stop using jQuerys append (or AngularJS's lite version) and start using ng-repeat. It does exactly the same thing with the added value that someone already thought of this issue and handled it for you. (I've been using AngularJS extensively, coming from a jQuery background, and found out in about a month that I don't need this kind of manual DOM manipulation at all anymore) — Sergiu Paraschiv
– Sergiu Paraschiv, Commented Jun 19, 2014 at 10:11
So use ng-include (docs.angularjs.org/api/ng/directive/ngInclude) building the template URL based on each different ID. - Please trust us on this one: stop trying do do this the jQuery way and approach it the AngularJS way. It will take some time and you will read/ask a lot of questions on Stack Overflow, but it will be worth your time. — Sergiu Paraschiv
– Sergiu Paraschiv, Commented Jun 19, 2014 at 10:49
Thanks @Sergiu Paraschiv, that's why I ask. Still how I'll use the nginclude if I need to include different html for each id. — vlio20
– vlio20, Commented Jun 19, 2014 at 10:55
I also see that you are using ng-model. It only works on input nodes. — Sergiu Paraschiv
– Sergiu Paraschiv, Commented Jun 19, 2014 at 11:04

Sergiu Paraschiv · Accepted Answer · 2014-06-19 11:15:10Z

2

Here's how I'd do it using ng-repeat and ng-include:

$scope.items = [
    {id: 1, title: 'foo', data: {body: 'baz1'}},
    {id: 2, title: 'bar', data: {body: 'baz2'}}
];

<div ng-repeat="item in items">
    <h2>{{item.title}}</h2>
    <div ng-include src="getTemplateById(item.id)"></div>
</div>

Where the templates are defined inline like this:

<script type="text/ng-template" id="template-1.html">
    Content of template-1.html
    <div>{{item.data.body}}</div>
</script>

<script type="text/ng-template" id="template-2.html">
    <p>Content of template-2.html</p>
</script>

and getTemplateById is:

$scope.getTemplateById = function(id) {
    return 'template-' + id + '.html';
};

You can see it in action here.

edited Jun 19, 2014 at 11:15

answered Jun 19, 2014 at 11:01

Sergiu Paraschiv

10.2k5 gold badges42 silver badges51 bronze badges

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

Comments

maurycy · Accepted Answer · 2014-06-19 10:13:49Z

2

I think you got it from wrong side, in angularjs controllers/data drives the view, here you are creating elements (and even worse adding them to page) in loop (expensive DOM operations) I'd replace your code with following

<div id="betsHolder">
  <div ng-repeat="bet in phaseBets track by bet.id">Bet id: {{bet.id}}</div>
</div>

as soon as you assign your array/object to $scope.phaseBets the DOM will be created

answered Jun 19, 2014 at 10:13

maurycy

8,4201 gold badge30 silver badges44 bronze badges

2 Comments

vlio20 Over a year ago

The thing is that by the I'd I will create an element (different for each id) so ng-repeat not helping that mutch.

maurycy Over a year ago

What do you mean different for each id? different class, name or whatever?

sylwester · Accepted Answer · 2014-06-19 10:15:18Z

-1

but using ng-repeat is better option,

   angular.forEach($scope.phaseBets, function(bet, i)
    {
        var betElement = angular.element('<div ng-model="bet">Bet id: {{bet.id}}</div>');
        angular.element(document.querySelector('#betsHolder')).append(betElement);
        $compile(betElement)($scope);
    });

answered Jun 19, 2014 at 10:15

sylwester

16.5k1 gold badge27 silver badges33 bronze badges

4 Comments

maurycy Over a year ago

no, no, no, never ever add DOM in loops, secondly the ng-repeat does exactly what vlio needs

sylwester Over a year ago

agree ng-repeat is much better option, I'm just fix vlio20 code

vlio20 Over a year ago

The thing is that by the I'd I will create an element (different for each id) so ng-repeat not helping that mutch.

sylwester Over a year ago

so my code should fix your problem, have you got your bet id in view ?

Collectives™ on Stack Overflow

angularjs data binding with dynamically created elements

3 Answers 3

Comments

2 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related