AngularJS - rendering nested scope vars

Question

Given the following code (simplified for the question):

var app = angular.module("app", []).controller("MainCtrl", function ($scope) {
$scope.data = {
    query: "",
    rnd: Math.random(),
    en: "this is your query: {{data.query}} and ({{rnd}}) is the random number",
    es: "esta es tu consulta: {{data.query}} Y ({{rnd}}) es el número aleatorio"
}
});

and the following view:

<div ng-app="app">
<div ng-controller="MainCtrl">
    <input ng-model="data.query">
    <div>Desired results EN : this is your query: {{data.query}} and ({{data.rnd}}) is the random number</div>
    <div>Desired results ES : esta es tu consulta: {{data.query}} Y ({{data.rnd}}) es el número aleatorio</div>
    <hr>
    <div>{{data.en}}</div>
    <div>{{data.es}}</div>
</div>

Q: What is the right way to render a nested value?

Update: just to clarify, I'm trying to create a language dictionary to my app, some of the captions contains scope vars, and I would like to keep the dictionary structures like this:

{key : sentenceWithVars}

DEMO

Thanks to @basilikum :stackoverflow.com/questions/18317307/… — Shlomi Schwartz
– Shlomi Schwartz, Commented May 1, 2014 at 14:15

basilikum · Accepted Answer · 2014-05-01 13:13:18Z

0

Just create two different bindings:

JS

var app = angular.module("app", []).controller("MainCtrl", function ($scope) {
    $scope.data = {
        query: "",
        en: "this is your query: ",
        es: "esta es tu consulta: "
    }
});

HTML

<div ng-app="app">
<div ng-controller="MainCtrl">
    <input ng-model="data.query">
    <div>Current Query:{{data.query}}</div>
    <div>{{data.en}}{{data.query}}</div>
    <div>{{data.es}}{{data.query}}</div>
</div>

Or watch query and update en and es accordingly:

JS

var app = angular.module("app", []).controller("MainCtrl", function ($scope) {
    $scope.data = {
        query: "",
        en: "this is your query: ",
        es: "esta es tu consulta: "
    }
    $scope.$watch("data.query", function (value) {
        $scope.data.en = "this is your query: " + value;
        $scope.data.es = "esta es tu consulta: " + value;
    });
});

HTML

<div ng-app="app">
<div ng-controller="MainCtrl">
    <input ng-model="data.query">
    <div>Current Query:{{data.query}}</div>
    <div>{{data.en}}</div>
    <div>{{data.es}}</div>
</div>

answered May 1, 2014 at 13:13

basilikum

10.5k5 gold badges49 silver badges58 bronze badges

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

3 Comments

Shlomi Schwartz Over a year ago

Thanks for the reply. This example is just simplified, think of a language pack containing many templates like "some text {{val1}} and {{val2}}" in many languages. when translating you would like to keep your dictionary as key:sentence where sentence can contain many scope values

basilikum Over a year ago

In this case have a look at the answer of this question: stackoverflow.com/questions/18317307/… Maybe that helps you.

Shlomi Schwartz Over a year ago

Thanks! I just found the same solution :)

Collectives™ on Stack Overflow

AngularJS - rendering nested scope vars

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related