AngularJS - Binding/Replacing AJAX content

Question

I am using AngularJS to load AJAX content and using ng-repeat to create a list of items. On the content I also have {{noun}} as a placeholder. My assumption was that when the ajax content is loaded, AngularJS would automatically replace {{noun}} with the data from $scope.noun model. But it isn't the case. Any quick and dirty way to make it happen?

Here's my code:

AllControllers.controller('AppController', ['$scope', '$http', function ($scope, $http) {

    $scope.noun = "My Noun";

    $scope.headlines = [{
        headline: "Top 10 Tricks to {{noun}}",
        usage: 10,
        votes: 100
    }];

    $scope.load_headlines = function() {
        $http.get('/data/headlines.json').
            success(function(data, status, headers, config){
                $scope.headlines = data;
            }).
            error(function(data, status, headers, config){
                console.log(status);
            });
    };
    }]);

<div ng-controller="AppController" ng-init="load_headlines()">

    <table>
    <tbody ng-repeat="headline in headlines">
    <tr>
        <td>{{headline.headline}}</td>
        <td class="center">{{headline.usage}}</td>
        <td class="center">{{headline.votes}}</td>
    </tr>
    </tbody>
    </table>

</div>

I didn't think it was necessary to include the ajax call. Because at the end of the day the $scope.headlines will be an array of objects. And the attribute headline will have the placeholder {{noun}}. So, how you populate $scope.headlines may not be relevant. — roosevelt
– roosevelt, Commented May 20, 2015 at 6:56
Does it work when you omit the load_headlines method and just use the fixed version of $scope.headlines? — devnull69
– devnull69, Commented May 20, 2015 at 7:00
Good catch. That was a typo, should be headlines. Still, no change to {{noun}} when the headline attribute is rendered. — roosevelt
– roosevelt, Commented May 20, 2015 at 7:00

yuro · Accepted Answer · 2015-05-20 07:04:44Z

1

Your $scope variable is differently to the ngRepeat variable. I think you have to change the $scope variable in your controller:

$scope.headlines_displayed = [{
        headline: "Top 10 Tricks to "+$scope.noun,
        usage: 10,
        votes: 100
    }];

answered May 20, 2015 at 7:04

yuro

2,2296 gold badges43 silver badges79 bronze badges

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

Comments

user3227295 · Accepted Answer · 2015-05-20 07:07:46Z

1

you can binding the {{moon}} in the td repeated.

change the code like this:

AllControllers.controller('AppController', ['$scope', '$http', function ($scope, $http) {

    $scope.noun = "My Noun";

    $scope.headlines = [{
        headline: "Top 10 Tricks to ",
        usage: 10,
        votes: 100
    }];
}]);

<tbody ng-repeat="headline in headlines_displayed">
<tr>
    <td>{{headline.headline}} {{noun}}</td>
    <td class="center">{{headline.usage}}</td>
    <td class="center">{{headline.votes}}</td>
</tr>
</tbody>

edited May 20, 2015 at 7:07

answered May 20, 2015 at 6:46

user3227295

2,1561 gold badge13 silver badges17 bronze badges

2 Comments

roosevelt Over a year ago

That won't work. Because I'm populating $scope.headlines using an ajax call. The $scope.headlines is dynamic.

user3227295 Over a year ago

i update my answer, you can binding tow params in html;

roosevelt · Accepted Answer · 2015-05-20 07:09:30Z

0

Figured it out. Ended up doing this:

<td>{{headline.headline.replace("{{noun\}\}", noun)}}</td>

answered May 20, 2015 at 7:09

roosevelt

1,9944 gold badges20 silver badges27 bronze badges

Comments

Arshabh Agarwal · Accepted Answer · 2015-05-20 08:27:01Z

0

You should be using $interpolate service to compile the string before assigning it to the scope. Passing a string with {{}} will not work. In your http success callback do something like this. This will replace your {{noun}} with scope value.

 $scope.load_headlines = function() {
    $http.get('/data/headlines.json').
        success(function(data, status, headers, config){
            $scope.headlines = data;
            $interpolate($scope.headlines.headline)($scope);
        }).
        error(function(data, status, headers, config){
            console.log(status);
        });
};
}]);

Take a look at the the this fiddle

edited May 20, 2015 at 8:27

answered May 20, 2015 at 7:26

Arshabh Agarwal

213 bronze badges

Collectives™ on Stack Overflow

AngularJS - Binding/Replacing AJAX content

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related