How i can parse or evaluate string with variables in AngularJS?

Question

Well, i have a object like to:

$scope.variable = "mike";
$scope.country = "...";
$scope.posts = [
    ...
    {
        id:1,
        name: 'bla bla bla',
        content: 'Hello, my name is {{variable}} and i am from {{country}}'
    },
    ...
];

So, how i can evaluating or parse content property?

My idea is used it in my view like this:

<a ng-click=" variable = 'John' ">Change name here!</a>
<div ng-repeat="post in posts">
    <h1>{{post.name}}</h1>
    <p>{{post.content}}</p>
</div>

Thanks

so basically you just want to concatenate the variable to the content property of posts? — Barak
– Barak, Commented Aug 10, 2016 at 0:45
I think either way, you're going to either have to pre-process the posts data before attaching it to the scope, or you'll have to transform it as it's rendered, i.e <p>{{replaceVariables(post.content)}}</p> - and then you would make a $scope.replaceVariables = function(content){...}; that does the replacing, using any of the answers mentioned below. scope.$eval() might help out too. — matmo
– matmo, Commented Aug 10, 2016 at 0:53
Sometimes the information comes from databases or external agents. This information could be provided with "variable standards" are interpreted with AngularJS — Olaf Erlandsen
– Olaf Erlandsen, Commented Aug 10, 2016 at 0:54

Phil · Accepted Answer · 2016-08-10 01:11:34Z

4

Create a method in your controller that allows you to run the string through $interpolate, ie

// don't forget to inject the $interpolate service

$scope.parseContent = function(template) {
    return $interpolate(template)($scope);
};

Then you can use

<p>{{parseContent(post.content)}}</p>

http://plnkr.co/edit/KB0aHsaoCxZGp3DY7JMI?p=preview

edited Aug 10, 2016 at 1:11

answered Aug 10, 2016 at 1:05

Phil

166k25 gold badges265 silver badges269 bronze badges

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

1 Comment

Olaf Erlandsen Over a year ago

This work well, i think this is better option! thanks

Samuel Toh · Accepted Answer · 2016-08-10 01:00:33Z

1

Update:
Assuming OP has access to ES6. Then try using the standard javascript API, String template.

See: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Template_literals

Example:

"use strict";
let variable = "mike";
let country = "Australia";
let posts = [
    {
        id:1,
        name: 'bla bla bla',
        content: `Hello, my name is ${variable} and i am from ${country}`
    }
];

console.log(posts);

Note that the string begins and ends with a "`" character vs "

Also example in AngularJS:

JSFiddle

edited Aug 10, 2016 at 1:00

answered Aug 10, 2016 at 0:37

Samuel Toh

19.5k3 gold badges29 silver badges40 bronze badges

7 Comments

Olaf Erlandsen Over a year ago

Thanks, but i need it on AngularJS, sorry

Samuel Toh Over a year ago

Isn't AngularJS javascript as well? Have you tried substituting with ${scope.country}?

Timtim Over a year ago

Try this ? content: 'Hello, my name is ' + $scope.variable + ' and i am from ' + $scope.country

matmo Over a year ago

The thing this answer is missing is that while console.log might properly apply the string interpolation (assuming OP is even using ES6), angularjs will not. So either OP would have to loop through all the data and re-set the content property manually before assigning it to his AngularJS scope, or he needs to do some angular magic - probably using $eval and $parse

Olaf Erlandsen Over a year ago

I like you example, but this don't work dynamically with <a ng-click=" variable = 'John' ">Change name here!</a> Thanks!!

|

Collectives™ on Stack Overflow

How i can parse or evaluate string with variables in AngularJS?

2 Answers 2

1 Comment

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related