3

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.

Community
  • 1
  • 1
vlio20
  • 8,955
  • 18
  • 95
  • 180
  • 2
    Stop using `jQuery`s `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 Jun 19 '14 at 10:11
  • 1
    So use `ng-include` (https://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 Jun 19 '14 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 Jun 19 '14 at 10:55
  • 1
    I also see that you are using `ng-model`. It only works on `input` nodes. – Sergiu Paraschiv Jun 19 '14 at 11:04

3 Answers3

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

maurycy
  • 8,455
  • 1
  • 27
  • 44
  • The thing is that by the I'd I will create an element (different for each id) so ng-repeat not helping that mutch. – vlio20 Jun 19 '14 at 10:44
  • What do you mean different for each id? different class, name or whatever? – maurycy Jun 19 '14 at 10:54
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.

Sergiu Paraschiv
  • 9,929
  • 5
  • 36
  • 47
-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);
    });
sylwester
  • 16,498
  • 1
  • 25
  • 33