Question

如何检索元素类并显示其名称？

我读到我可以使用像：

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

Answer 1

在dom中，getElementByClassName返回NodeList。

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

那么你必须迭代节点。您可以使用它的长度属性。

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中，您可以将param传递给页面/视图，因此您可以使用路由和$ routeParam服务必须在控制器中注入依赖项。那么对于页面＆＃34; new / 3＆＃34;你问"$routeParams.id"，你会得到3。

获取活动菜单元素并显示其标题AngularJS

1 个答案: