javascript - 在菜单项上应用 css 单击

Question

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

我想知道如何使用 angular js 实现相同的功能。最终将“事件”类添加到所选菜单项，同时将名称应用于下面的标题。在 fiddle 中我已经用 jquery 完成了它，但现在我想知道如何通过 angularjs 完成它

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

}

最好在指令或 Controller 中执行此操作吗？

Answer 1

您根本不想在 Angular 中设置类和修改 HTML。相反， Angular 模型应该代表您的应用程序的数据，并使用数据绑定(bind)来更改与 View 相关的属性，例如类等。

在您的例子中，作用域可以有一个菜单项列表和一个包含当前事件项的属性。当单击菜单项时，事件项会发生变化。 View 中的所有更改都由 Angular 数据绑定(bind)处理...

$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/