Question

我有这段代码：

<ul>
  <li ng-class="validation() ? 'active-'+getCounter()' : 'not-active'">
    <a ng-click="activate()">Test</a>
  </li>
  <li ng-class="validation() ? 'active-'+getCounter()' : 'not-active'">
    <a ng-click="activate()">Test</a>
  </li>
</ul>

我试图以角度制作一个脚本，当你点击链接时，有一个变量会增加，以便父<li>得到一个类激活 - （递增变量）。问题是，当我点击一个链接，并且变量增加时，它会更新所有<li>的类。

示例：我点击第一个链接，它会将active-1作为课程给我，然后点击它给我active-2的第二个链接，但首先我也得到了active-2，我想要它留下active-1

我希望你能帮我做这个剧本。

链接到Plunker

Answer 1

如果您想单独更新<li>s，则需要为它们设置不同的计数器。在此Plunker我已将var counterClick修改为数组，并将您的html更新为使用ID为0和1的<li>数字1和2。

index.html成为：

<!DOCTYPE html>
<html ng-app="test">

  <head>
    <script data-require="angular.js@*" data-semver="1.3.0" src="//code.angularjs.org/1.3.0/angular.js"></script>
    <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="MainController">
    <ul>
  <li ng-class=" validation(0) ? 'active-'+getCounter(0) : 'not-active'">
    <a href='' ng-click="activate(0)">Test</a>
  </li>
  <li ng-class=" validation(1) ? 'active-'+getCounter(1) : 'not-active'">
    <a href='' ng-click="activate(1)">Test</a>
  </li>
</ul>
  </body>

</html>

script.js变为：

(function($){

    var app = angular.module('test',[]);

    app
    .controller('MainController', ['$scope', '$http', function($scope, $http){

        // Variable not in scope
        var counterClick = [0,0];

        $scope.validationNum = [];

        $scope.activate = function(id) {
            counterClick[id] += 1;
            $scope.validationNum.push(id);
            console.log(counterClick)
        }

        $scope.getCounter = function(id) {
            return counterClick[id];
        }

        $scope.validation = function(id) {
            if ($.inArray(id, $scope.validationNum) > -1)
                return true;
        }
    }]);


})(jQuery);

我还在style.css中添加了一些基本类

.not-active{
  background-color: red;
}
.active-1{
  background-color: #fff;
}
.active-2{
  background-color: blue;
}

.active-3{
  background-color: green;
}

Answer 2

所以我尝试对你的问题进行另一种解释：

你想：

能够单独激活您的<li>s，并为<li>提供一个有效-1的课程，为<li>两个提供一个有效-2 ...
点击<li>时，应激活并给出正确的课程

所以我从之前的回答中对Plunker做了一些修改，你可以找到新的Plunker here。

的index.html：

<!DOCTYPE html>
<html ng-app="test">

  <head>
    <script data-require="angular.js@*" data-semver="1.3.0" src="//code.angularjs.org/1.3.0/angular.js"></script>
    <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="MainController">
    <ul>
  <li ng-class=" validation(0) ? 'active-'+getCounter(0) : 'not-active'">
    <a href='' ng-click="activate(0)">Test</a>
  </li>
  <li ng-class=" validation(1) ? 'active-'+getCounter(1) : 'not-active'">
    <a href='' ng-click="activate(1)">Test</a>
  </li>
</ul>
  </body>

</html>

的script.js：

(function($){

    var app = angular.module('test',[]);

    app
    .controller('MainController', ['$scope', '$http', function($scope, $http){

        // Variable not in scope
        var counterClick = [1,2];

        $scope.validationNum = [];

        $scope.activate = function(id) {
            $scope.validationNum.push(id);
            console.log(counterClick)
        }

        $scope.getCounter = function(id) {
            return counterClick[id];
        }

        $scope.validation = function(id) {
            if ($.inArray(id, $scope.validationNum) > -1)
                return true;
        }
    }]);


})(jQuery);

的style.css：

/* Styles go here */

.not-active{
  background-color: red;
}
.active-1{
  background-color: #fff;
}
.active-2{
  background-color: blue;
}

.active-3{
  background-color: green;
}

增加ng-class指令内的变量

2 个答案: