Javascript 在菜单项上应用css单击
我这里有一个小测试应用程序。。。 我想知道如何使用angular js实现相同的功能。最终将“活动”类添加到所选菜单项,同时将名称应用到下面的标题。在小提琴中,我已经用jquery完成了它,但现在我想知道如何通过angularjs实现这一点Javascript 在菜单项上应用css单击,javascript,angularjs,Javascript,Angularjs,我这里有一个小测试应用程序。。。 我想知道如何使用angular js实现相同的功能。最终将“活动”类添加到所选菜单项,同时将名称应用到下面的标题。在小提琴中,我已经用jquery完成了它,但现在我想知道如何通过angularjs实现这一点 var app = angular.module("app", []); function ctrl($scope, Data) { } 最好是在指令或控制器中执行吗 在angular中,您可以使用ng类添加具有布尔条件的类: 您可以将类绑定到范围中
var app = angular.module("app", []);
function ctrl($scope, Data)
{
}
最好是在指令或控制器中执行吗 在angular中,您可以使用ng类添加具有布尔条件的类:
您可以将类绑定到范围中的布尔变量,当您单击按钮时,使用所需的值更新它。您根本不想在angular中设置类和修改HTML。相反,角度模型应该表示应用程序的数据,并使用数据绑定来更改与视图相关的属性,如类等 在您的情况下,作用域可以有一个菜单项列表和一个保存当前活动项的属性。单击菜单项时,活动项会发生更改。视图中的所有更改都由角度数据绑定处理
$scope.items = ['Home', 'Tickets', 'Direct Deposit', 'activity',
'Pay Rate Inquiry', 'Templates'];
$scope.activeItem = 'Home';
$scope.setActive = function (activeItem) {
$scope.activeItem = activeItem;
};
看法
{{activeItem}}
jsiddle:要“比较”jQuery和angular,我建议快速查看
<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>