Javascript 从json文件绑定单个角度表达式_Javascript_Json_Angularjs

Javascript 从json文件绑定单个角度表达式

javascript json angularjs

Javascript 从json文件绑定单个角度表达式,javascript,json,angularjs,Javascript,Json,Angularjs,我对angularJS还很陌生，显然有些简单的事情我还不明白。我想做的是：我有一个de-de.json（例如，对于一个计划中的多语言站点，它有几个语言键），看起来有点像这样 { "index": { "headline": "The title of that view", "tabmenu": [ { "id": "home", "class": "active i

我对angularJS还很陌生，显然有些简单的事情我还不明白。我想做的是：

我有一个de-de.json（例如，对于一个计划中的多语言站点，它有几个语言键），看起来有点像这样

{
    "index": {
        "headline": "The title of that view",
        "tabmenu": [
            {
                "id": "home",
                "class": "active in",
                "title":"Title No. 1",
                "description":"Some description"
            },
            {
                "id": "profile",
                "class": "",
                "title":"Title No. 2",
                "banner":"WallBanner.jpg",
                "description":"Some description"
            },
            {
                "id": "messages",
                "class": "",
                "title":"Title No. 3",
                "description":"Some description"
            },
            {
                "id": "settings",
                "class": "",
                "title":"Title No. 4",
                "description":"Some description"
            }
        ]
    },
    "media": {
       ...
    }
}

接下来看一下my index.html，它看起来像：

<html ng-app id="ng-app">
<head>
    <title>Title of the Site</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
</head>

<body ng-controller="languageKey">
   <div class="container" ng-model="language.index">

       <h1>{{ headline }}</h1>

       <div class="row">
           <div class="col-lg-12">

               <ul class="nav nav-tabs" id="myTab">
                   <li class="active"><a href="#home" data-toggle="tab">Tab1</a></li>
                   <li><a href="#profile" data-toggle="tab">Tab2</a></li>
                   <li><a href="#messages" data-toggle="tab">Tab3</a></li>
                   <li><a href="#settings" data-toggle="tab">Tab4</a></li>
               </ul>

               <div class="tab-content">
                   <div class="tab-pane fade {{ lg.class }}" id="{{ lg.id }}" ng-repeat="lg in language.index.tabmenu">
                       <h3>{{ lg.title }}</h3>
                       <p>{{ lg.description }}</p>
                   </div>
               </div>

           </div>
       </div>

   </div>

   <script src="../assets/jquery/jquery.js"></script>
   <script src="../assets/bootstrap/js/bootstrap.min.js"></script>
   <script src="../assets/angularjs/angular.min.js"></script>
   <script>
        $(function () {
            $('#myTab a:first').tab('show')
        })

       function languageKey($scope, $http)
       {
           $http({method: 'POST', url: 'de-DE.json'}).success(function(data)
           {
               $scope.language = data; //response Data
           });
       }
   </script>
</body>
</html>


网站名称
{{headline}}






{{lg.title}}
{{lg.description}}
$（函数（）{
$（“#myTab a:first”）.tab（'show'）
})
函数语言键（$scope，$http）
{
$http（{method:'POST'，url:'de-de.json'}）。成功（函数（数据）
{
$scope.language=data；//响应数据
});
}

因此，多亏了一些谷歌知识，带有

的部件工作得很好

但更常见的是只使用一次的语言键，而不会像上面那样重复html结构

<h1>{{ headline }}</h1> 
(I've also tried <h1 ng-bind="{headline}"

{{headline}
（我也试过如果这样做有效的话
<div ng-repeat="lg in language.index.tabmenu">

ng型号
仅适用于输入：
ngModel指令将输入、选择、textarea（或自定义表单控件）绑定到作用域上的属性
您只需在控制器中的$scope
元素中设置JSON对象，就可以在视图中使用它：
$scope.myJSON = {...};

在HTML中
<h1>{{myJSON.index.headline }}</h1> 

{{myJSON.index.headline}

顺便说一下，如果您正在实现一个多语言应用程序，请查看。感谢这两个回复：）这很好。有时候，答案比我的古怪让我觉得更明显；）。。。
<h1>{{myJSON.index.headline }}</h1>