Question

我在这里有一个小测试应用程序...... http://jsfiddle.net/poppypoop/LMCC2/

我想知道如何用angular js完成相同的功能。最终添加“活跃”＆＃39;将名称应用于下面的标题时，将类添加到所选菜单项。在小提琴中，我用jquery完成了它，但现在我想知道如何通过angularjs实现这一点

var app = angular.module("app", []);
function ctrl($scope, Data)
{

}

最好是在指令或控制器中执行此操作吗？

Answer 1

您根本不想设置类并在角度内修改HTML。相反，角度模型应该表示应用程序的数据，并使用数据绑定来更改与视图相关的属性，例如类等。

在您的情况下，范围可以包含菜单项列表和包含当前活动项的属性。当单击菜单项时，活动项目会更改。视图中的所有更改都由角度数据绑定处理......

$scope.items = ['Home', 'Tickets', 'Direct Deposit', 'activity',
                'Pay Rate Inquiry', 'Templates'];
$scope.activeItem = 'Home';
$scope.setActive = function (activeItem) {
    $scope.activeItem = activeItem;
};

查看

<div class="menu-container">
    <ul id="menu-ul" class="nav">
        <li ng-repeat="item in items">
            <a ng-class="{ active: item === selectedItem }" href="#" 
             ng-click="setActive(item)">{{ item }}</a>
        </li>
    </ul>
</div>
<div class="nav-selection">
    <span>{{ activeItem }}</span>
</div>

JsFiddle：http://jsfiddle.net/xx7KF/

Answer 2

在angular中，您可以使用ng-class添加具有布尔条件的类：

AngularJS - ng-class

您可以将类绑定到范围内的布尔变量，当您单击该按钮时，请使用您需要的值更新它。

在菜单项单击上应用css

2 个答案: