My experience with angularJS is fairly new, and there are still some concepts that I am trying to grasp. What I am aiming to achieve is the following:
I have a de-DE.json file (containing various language keys for a multi-language website) that has a structure similar to this:
{
"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": {
...
}
}
Now, taking a look at my index.html code snippet:
<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>
After doing some research online, I managed to make the
<div ng-repeat="lg in language.index.tabmenu">However, most often there are instances where language keys are used singularly without repeating HTML structure as shown above like:
<h1>{{ headline }}</h1>
(I've also tried <h1 ng-bind="{headline}"
Therefore, I am looking for a lightweight solution to simply call those expressions.
Unfortunately, the attempt of using ng-model="language.index" does not yield the desired outcome in such cases.