Получить активный элемент меню и отобразить его заголовок AngularJS

0

Как получить класс элемента и отобразить его имя?

Я читал, что могу использовать sth как:

var elementResult = element[0].getElementsByClassName('menu-item-active');
      console.log('element[0].getElementsByClassName: ', elementResult);

JSON:

{
    "title": "Fruits",
    "mainmenu": [
        {
            "id": "apples",
            "title": "Apples",
            "href": "#/apples",
            "act": "menu-item-active"
        },
        {
            "id": "bananas",
            "title": "Bananas",
            "submenu": [
                 {
                     "id": "banana-box",
                     "title": "Banana Box",
                     "href": "#/banana-box",
                     "act": "menu-item-active"
                }
            ]
        }
    ]
}

У меня есть директива

.directive('dir', function () {
    return {
        restrict: 'E',
        template:  "<nav class=\"navbar navbar-inverse navbar-fixed-top\" role=\"navigation\" id=\"nav-bar\">"
                        + "<div class=\"container-fluid\">"
                            + "<div class=\"navbar-header\">"
                                + "<span class=\"navbar-brand\" >{{title}} </span>" 
                            + "</div>"
                            + "<ul class=\"nav navbar-nav\" ng-repeat=\"item in mainmenu\">"
                                + "<li>"
                                    + "<a href=\"{{item.href}}\" data-active-menu-link=\"{{item.act}}\">{{item.title}}</a>"
                                + "</li>"
                            + "</ul>"
                        + "</div>"
                    + "</nav>"
           }
});

И контроллер:

   .module('menu').controller('menuCtrl', ['$scope', '$http', function ($scope, $http) {
        $http.get('MenuItems.json').success(function (data) {
            $scope.mainmenu = data.mainmenu;
            $scope.title = data.title;
        });
    }]);

Что я хочу достичь: когда я буду на каждом сайте/подсайте, и я хочу отобразить его имя как {{title}} на моем сайте

Я попытался использовать elementResult но я не знаю, как проверить, является ли элемент элементом menu-item-active. Я думал об использовании инструкции ng-if, но я не знаю, как ее обрабатывать.

For.ex. ng-if="elementResult has class 'menu-item-active' then display its 'title' as {{title}} in menu bar

  • 0
    Ваш JSON недопустим для начала. Вы не можете иметь имена свойств в массиве и т. Д. Не могли бы вы исправить это, обновив свой вопрос с правильным JSON, пожалуйста.
  • 0
    Я не понимаю, что не так в файле JSON? редактировать: я видел одну ошибку, я исправил ее
Показать ещё 2 комментария
Теги:
directive

1 ответ

0

В dom, getElementByClassName возвращает NodeList.

var nodeList = element[0].getElementsByClassName('menu-item-active');

Итак, вам нужно перебирать узлы. Вы можете использовать свойство length.

for ( var i = 0 ; i < nodeList.length ; i++ ) 
    if ( nodeList[i].className == 'menu-item-active' ) 
        var elem = $scope.findByClassName('menu-item-active');

и в вашем методе метода записи:

$scope.findByClassName = function(id){
    for ( var i = 0 ; i < jsonArray.length ; i++ ) 
        if ( jsonArray[i].mainmenu.act == id ) 
            return jsonArray[i].title;
    }

Также подготовьте правильные пары значений ключа файла и массивы JSON (они начинаются с {и заканчиваются на}).

Кроме того, в Angular вы можете перейти к параметру страницы/вида, чтобы вы могли использовать маршруты, а $ routeParam-сервис должен быть зависимым, введенным в ваш контроллер. Затем для страницы "new/3" вы запрашиваете "$routeParams.id" и вы получите 3.

Поделиться
  • 2
    Я думаю, что это крайне отсталый способ сделать что-то, что должно быть полностью выполнимо на уровне модели. Не нужно смотреть на какие-либо элементы DOM - пусть привязка данных справится с этим.

Ещё вопросы

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