Trying to output html with angular js

Question

Im trying to output html with angular js. I know the html is going to be ok. This is what im trying now:

<div class="items-list" id="items-container">
        <div ng-repeat="data in ItemsData track by $index" ng-bind-html='ItemsData'>
            <-data->
        </div>
    </div>

And this is what i pretty much am doing with the data

$.ajax({
                        method: "POST",
                        url: "{{URL::route('items')}}",
                        data: filteringData,
                        dataType: 'json'
                    }
            ).done(function (response) {
                        $scope.ItemsData = $sce.trustAsHtml(response['items']);
                        $scope.ItemsPage += 1;
                        $scope.ItemsLastPage = response['lastPage'];
                        $scope.ItemsLoaderBusy = false;
                    });

But this is not working. Im trying to do this for a long time.

Pretty much what I want is that I get a response from the server. It has 'items'. Its an array of elements that are html. How could I output them with a repeat?

And I really dont know what im doing. Thanks for help.

Thanks for the response. Yeah, Im getting this Uncaught Error: [$sce:itype] errors.angularjs.org/1.4.0/$sce/itype?p0=html I know it is something to do with the trusted html thing. But I dont understand why. How should it work then. — DaveLV2
– DaveLV2, Commented Jun 4, 2015 at 20:41
I'm confused by the code you have written here. If $scope.ItemsData is an HTML string, then how could you iterate over it with ng-repeat? Can you post some sample of what you are receiving in the function, and the output you are expecting? — Claies
– Claies, Commented Jun 4, 2015 at 20:47
No,no. ItemsData is actually an array that has html string data in it. — DaveLV2
– DaveLV2, Commented Jun 4, 2015 at 20:50

Pankaj Parkar · Accepted Answer · 2015-06-04 20:51:26Z

2

You should never have been use $.ajax, that should be replaced the ajax call using $http service. Using $.ajax will not run digest cycle on its completion where $http does run digest cycle after callback gets called

Additionally your ng-bind would be ng-bind-html="trustedAsHtml(data)"

then your controller will have one method trustedAsHtml that will html as trusted using $sce service

$scope.trustedAsHtml = function(data){ return $sce.trustedAsHtml(data); }

edited Jun 4, 2015 at 20:51

answered Jun 4, 2015 at 20:44

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

4 Comments

Pankaj Parkar Over a year ago

@davelv2 this must have helpful to you..:)

DaveLV2 Over a year ago

@pankajpakar Your right too. So thanks for the help! :)

Pankaj Parkar Over a year ago

does that $sce part was helpful??

DaveLV2 Over a year ago

I used the other one in the selected answer.

ShankarSangoli · Accepted Answer · 2015-06-04 20:58:10Z

1

You have to use the data variable which you have defined in ng-repeat for binding inside ng-bind-html. So change ItemsData to data.

<div ng-repeat="data in ItemsData track by $index" ng-bind-html='data'>
   <-data->
</div>

Also as you commented to the question you are getting error when executing $sce.trustAsHtml method, it is because you are passing an array response['items']when it expects a string.

Assuming response['items'] as an array of string you can try this.

$.ajax({
    method: "POST",
    url: "{{URL::route('items')}}",
    data: filteringData,
    dataType: 'json'
}).done(function(response) {
    $scope.ItemsData = [];
    angular.forEach(response.items, function(item) {
       $scope.ItemsData.push($sce.trustAsHtml(item));
    });
    $scope.ItemsPage += 1;
    $scope.ItemsLastPage = response['lastPage'];
    $scope.ItemsLoaderBusy = false;
});

Also as pointed by @pankajparkar you should try to use $http instead of jQuery ajax because it will run the digest cycle.

edited Jun 4, 2015 at 20:58

answered Jun 4, 2015 at 20:40

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

4 Comments

DaveLV2 Over a year ago

Alright, the error is gone now. Now I need to only change it to use angular http to work right?

ShankarSangoli Over a year ago

I made another update to the answer ..take a look and update in your code accordingly... then you should be good to go.

DaveLV2 Over a year ago

OMG THANK YOU VERY MUCH! I HAVE BEEN DOING THIS FOR MORE THEN A COUPLE OF HOURS AND COULDN'T GET IT TO WORK! Btw, its not yelling caps locks its Happiness caps locks :)

DaveLV2 Over a year ago

Let us continue this discussion in chat.

Collectives™ on Stack Overflow

Trying to output html with angular js

2 Answers 2

4 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related