Angular ng-repeat does not iterate over array of string items containing html

Question

I have a div where I want to put checkboxes with text beside them.

I am getting this text from a database and adding to an array in javascript the html formatting and text that I want:

var textHtmlElement = '<label class="smallPadding"><input type="checkbox">' + text + '</label>';
textList.splice(textList.length , 0, textHtmlElement);

The titles array is returned from a function is then assigned a $scope variable:

$scope.list = service.getTextList();

However, when I try to ng-repeat over that array, the checkboxes and text does not show up.

<div class="checkbox" ng-repeat="item in list">
    {{ item }}
</div>

There is a scope variable called list when logging scope it to the console: console.log($scope). What I found odd is that when I log console.log($scope.list), it shows an empty array... If I explicitly do $scope.list = ['1', '2', '3'], the ng-repeat works, so I guess the problem is in this line $scope.list = service.getTextList();

How should I fix this?

EDIT The getTextList() function in my service:

getTextList: function(){
    return textList;
}

EDIT 2 My service where I get my data and return the list of text:

app.service('service', function() {
    var textList = [];

    return {
        getTextList: function(){
            return textList;
        },
        dataQuery: function() {
            var text = "";
            . 
            . 
            .
            query.find({
                success: function (results) {
                    for (var i = 0; i < results.length; i++) {
                        var object = results[i];
                        text = " " + object.get('text');
                        textList.splice(textList.length , 0, text);
                    }
            . 
            . 
            .

My html:

<div class="checkbox" ng-repeat="item in list">
    <label class="smallPadding"><input type="checkbox">{{ item }}</label>
</div>

My controller remains the same - though the array assigned to the $scope.list variable does not contain html. It is just data, as suggested. First, I call the dataQuery function in my service, then the getTextList function.

Edit 3 Working code. I added the following around my $scope.list = service.getTextList();:

$timeout(function(){
    $scope.list = service.getTextList();
}, 150);

The 150 ms timeout gives time for the query to finish getting the data which will be assigned to the $scope.list variable.

So, you diagnosed that the problem is in service.getTextList(); Why don't you post the code of getTextList() then? Also, you're doing it plain wrong. HTML should be generated by the view, not by services. Services should return data, not HTML. — JB Nizet
– JB Nizet, Commented Sep 3, 2015 at 22:03
why dont you just return your text and have the html in your html? what is the purpose of having it in a service? — Joe Lloyd
– Joe Lloyd, Commented Sep 3, 2015 at 22:04
@FelixGluschenkov come on. You need to post the relevant code if you want us to help you. How can we guess how textList has been initialized, where it comes from, etc. if you don't post the code? — JB Nizet
– JB Nizet, Commented Sep 3, 2015 at 22:09

Joe Lloyd · Accepted Answer · 2015-09-03 22:14:49Z

1

Best Practice

Do not use a service to manipulate the DOM in the way you have, its bad practice. instead use your service to get your array of text and then instantiate it in a controller.

From the controller you can bind your array returned to your $scope and in your html you should have something like this

<div class="checkbox" ng-repeat="item in list">
  <label class="smallPadding"><input type="checkbox">{{ item }}</label>
</div>

That is if I understand what you are trying to do.

answered Sep 3, 2015 at 22:14

Joe Lloyd

22.8k7 gold badges59 silver badges86 bronze badges

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

4 Comments

Felix Gluschenkov Over a year ago

Thanks for the best practice tip. I've tried your suggestions, but it still doesn't work. See edit 2.

Joe Lloyd Over a year ago

where do you get your array values from? http?

Felix Gluschenkov Over a year ago

Oh, I got it to work :D It turns out that even though I call the Parse query before getting the array, the code continues to run on after the query. I.e. query gets called, get array is called (but query is still getting data).

Felix Gluschenkov Over a year ago

I added a $timeout: see edit 3. It works, but could you tell me if its good practice to do something like that?

Saras Arya · Accepted Answer · 2015-12-24 06:56:46Z

1

Whenever you are populating a list from backend and you see a backend call taking some time. using ng-if is one of the best options I suppose because the element will not be loaded until the array has values. With the current method, there is no guarantee that even in 150 milliseconds you will have the data. Hope it helps someone.

answered Dec 24, 2015 at 6:56

Saras Arya

3,1729 gold badges44 silver badges74 bronze badges

Collectives™ on Stack Overflow

Angular ng-repeat does not iterate over array of string items containing html

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related