Javascript 在'上使用ng类；md列表项'；点击angularjs

我是新来的

angularjs

。我的html页面中有六个

md列表项。我想要实现的是，当我单击每个
md列表项
时，它将添加一个
类
。我只想在单击每个链接时添加一个活动的链接。以下是我的想法：

<md-list-item ng-class="{'setAsActive': ifThisOneIsClicked()}">
   <p>Link 1</p>
</md-list-item>

<md-list-item ng-class="{'setAsActive': ifThisOneIsClicked()}">
   <p>Link 2</p>
</md-list-item>

<md-list-item ng-class="{'setAsActive': ifThisOneIsClicked()}">
   <p>Link 3</p>
</md-list-item>


链接1

链接2

链接3


可能吗？如果是，我怎么做？谢谢
 您可以通过选择范围变量
来处理它。它将保留选中的项目。使用
ng，单击
指令，根据项目更改该值

<md-list-item ng-class="{'setAsActive': selected=='1'}" ng-click="selected='1'">
   <p>Link 1</p>
</md-list-item>

<md-list-item ng-class="{'setAsActive': selected=='2'}" ng-click="selected='2'">
   <p>Link 2</p>
</md-list-item>

<md-list-item ng-class="{'setAsActive': selected=='3'}" ng-click="selected='3'">
   <p>Link 3</p>
</md-list-item>

我认为最好的办法是制作一些易于重用的东西，比如指令

js:

您可以在任何需要此行为的地方轻松地使用
ng active
指令，例如：

html:


链接1

链接2

链接3

我只想扩展Manuel的答案。
如果要处理“单击切换”（第一次单击时将添加该类，第二次单击时将删除该类），可以使用对象和布尔值：

$scope.selectedItems = {}
$scope.isSelected = function (index) {
    return $scope.selectedItems[index] === true
}

$scope.selectItem = function (index) {
    $scope.selectedItems[index] = !$scope.selectedItems[index]
}

（HTML不会更改）

此外，由于您刚接触Angular，现在是学习一些技巧的好时机：


这样，一次只有一个元素具有“setAsActive”类。也许他想把这个类添加到他点击的每个元素中。谢谢！它对我有用，这正是我想要的@曼努埃尔·奥布雷戈桑克斯先生！多聪明的方法啊@尹
$scope.selectedItems = [];
$scope.isSelected= function(index){
     return $scope.selectedItems.indexOf(index)!=-1;
}

$scope.selectItem = function(index){
    //TODO: check if it was already added
    $scope.selectedItems.push(index)
}

angular.module('tAngularApp').directive('ngActive', function() {
    return {
        restrict: 'A',
        link: function($scope, element, attrs, ngModelCtrl) {
            element.bind('click', function () {
                element.addClass('setAsActive');
            });
        }
    };
});

<md-list-item ng-active>
   <p>Link 1</p>
</md-list-item>

<md-list-item ng-active>
   <p>Link 2</p>
</md-list-item>

<md-list-item ng-active>
   <p>Link 3</p>
</md-list-item>

$scope.selectedItems = {}
$scope.isSelected = function (index) {
    return $scope.selectedItems[index] === true
}

$scope.selectItem = function (index) {
    $scope.selectedItems[index] = !$scope.selectedItems[index]
}