Question

我正在尝试使用该模型为我的ngRepeat的每个根元素添加类名。我需要每个li都有一个唯一的类名。反正有吗？

类= “{{item.clazz}}”

<nav id="main-menu">
    <ul>
        <li ng-repeat="item in menus[0].items" class="{{item.clazz}}">
            <a class="dropdown-toggle" href="#" slidedown-toggle><i class="{{item.icon}}"></i><span>{{item.name}}</span></a>
            <ul class="dropdown-menu">
                <li ng-repeat="link in item.items[0].items">
                    <a href="{{link.link}}">{{link.name}}</a>
                </li>
            </ul>
        </li>
    </ul>
</nav>


items: [{
            title: 'About Us',
            icon: 'icon-about',
            clazz: 'about-us-menu',
            items: [{
                name: 'Who are we?',
                icon: '',
                link: '#'
            }, {
                name: 'Our Partners',
                icon: '',
                link: '#'
            }, {
                name: 'Careers',
                icon: '',
                link: '#'
            }, {
                name: 'Stuff from CMS',
                icon: '',
                link: '#'
            }]
        }]

Answer 1

查看您的代码，您在顶级对象上有clazz，但是您的ng-repeat正在查看item.clazz，它将返回undefined。

因此，任何items数组对象都应该类似于：

items: [{
        name: 'Who are we?',
            icon: '',
            link: '#',
            clazz: 'unique-class-name'
        }, {
            name: 'Our Partners',
            icon: '',
            link: '#',
            clazz: 'unique-class-name'
        }]

或者，如果您想要＆＃39; about-us-menu＆＃39;类应用于所有li然后使用以下：

<li ng-repeat="item in menus[0].items" class="{{menus[0].clazz}}">

Answer 2

是的，您可以使用ngClass directive。

如果您的控件中有

$scope.someClasses = "foo bar";

在你看来：

<div ng-class="someClasses">

然后，课程foo和bar将应用于您的div。

动态类名称ngRepeat根元素

2 个答案: