AngularJS-渲染嵌套作用域變量

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"
}
});

和以下視圖：

<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>

問 ： 呈現嵌套值的正確方法是什么？

更新 ：只是為了澄清，我正在嘗試為我的應用創建語言字典，其中一些標題包含范圍變量，並且我希望保留這樣的字典結構：

{key：句子WithVars}

演示

Answer 1

只需創建兩個不同的綁定：

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>

或觀看query並相應地更新en和es ：

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>