Динамический доступ к JSON из HTML

0

Я использую угловой перевод:

<script src="lib/angular-translate/angular-translate.min.js"></script>
    <script src="lib/angular-translate-loader-static-files/angular-translate-loader-static-files.min.js"></script>

с файлом JSON для английского dict:

{
  "test": "test_en",
  "menu": {
    "home": "home",
    "config": "settings",
    "logout": "log out"
  }
}

теперь у меня есть функция (ng-repeat), которая динамически записывает мое боковое меню, но у меня возникают проблемы с получением имени файла JSON.

если я использую:

<span class="menuname">{{"test" | translate}}</span>

выход правильный: test_en

но как я могу получить доступ к menu.home, например?

имя или структура меню называется элементом, и если я использую

<span class="menuname">{{element.menuname}}</span>

Я получаю, домой, config,... поэтому я ищу что-то вроде:

<span class="menuname">{{"test.[element.pagename]" | translate}}</span>

Благодарю.

РЕДАКТИРОВАТЬ:

menu.html

<ion-side-menus enable-menu-with-back-views="false">
    <ion-side-menu-content></ion-side-menu-content>
    <ion-side-menu side="left">
        <ion-content>
            <div class="list-group" ng-controller="ListMenuItems as ItemList ">
                <div ng-repeat="element in ItemList.menuitems" >
                    <a class="item padding_0" menu-close ng-href="{{element.sref}}" ng-class="navClass('{{element.pagename}}')">
                        <div class="centered">
                            <img ng-src="{{element.img2show}}" />
                            <span class="menuname">{{"menu.[element.pagename]" | translate}}</span>
                        </div>
                    </a>
                </div>
            </div>
        </ion-content>
    </ion-side-menu>
</ion-side-menus>

в app.js

var App = angular.module('MyApp.controllers')

App.controller('ListMenuItems',['$scope','$location',
    function($scope,$location){
        this.menuitems = menuitems;
        $scope.navClass = function (page) {
            var currentRoute = $location.path().substring(5) || 'home';
            //console.log(page ," ::: ", currentRoute);
            return page === currentRoute ? 'active' : 'no_active';
        };
}]);

var menuitems = [
    {
        menuname: 'home',
        pagename: 'home',
        sref: '#/app/home',
        img2show: "img/menu/iconos/home.png",
    },
    {
        menuname: 'configuració',
        pagename: 'settings',
        sref: "#/app/settings",
        img2show: "img/menu/iconos/settings.png",
    },
...
}
Теги:
ionic

1 ответ

0

Пожалуйста, укажите полный код как exapmle.

В противном случае я бы предположил, что вы не используете ng-repeat перед пролетом.

Вы должны использовать:

<div ng-repeat="item in JSONs">
<span class="menuname">{{item.item | translate}}</span>
<span class="menuname">{{item.menu | translate}}</span>
<span class="menuname">{{item.menu.home | translate}}</span>
<span class="menuname">{{item.menu.config | translate}}</span>
<span class="menuname">{{item.menu.logout | translate}}</span>
</div>
  • 0
    Извините, хотя мне было достаточно кода для объяснения моего вопроса. Я добавил основную структуру бокового меню. Спасибо

Ещё вопросы

Сообщество Overcoder
Наверх
Меню