Question

我是angularjs的新手。我的html页面中有六个md-list-item。我想要实现的是，当我点击每个md-list-item时，它会添加class。我只想在点击每个链接时添加有效链接。这就是我的想法：

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

这可能吗？如果是，我该怎么办？谢谢！

Answer 1

您可以使用范围变量selected来处理它。它将保留选择的项目。并且ng-click指令根据项目更改该值。

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

另一个选项：如果您想保留所选项目的列表。

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

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

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

在您的控制器中：

保留包含所选项目的数组。

$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)
}

Answer 2

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

JS：

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

您可以轻松地将ng-active指令注入到您想要此行为的位置，例如：

HTML：

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

Answer 3

我只想扩展曼努埃尔的答案。如果您想要处理“点击切换”＃39; （该类将在您第一次单击并在第二次删除时添加）您可以通过使用对象和布尔值来实现：

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

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

（HTML不会改变）

此外，正如您对Angular的新手一样，现在是学习一些技巧的好时机：

https://github.com/mgechev/angularjs-style-guide

https://www.youtube.com/watch?v=ZhfUv0spHCY

在'md-list-item'上使用ng-class，单击angularjs

3 个答案: