Angularjs 在ng class指令中增加一个变量_Angularjs_Angularjs Scope

Angularjs 在ng class指令中增加一个变量

angularjs

Angularjs 在ng class指令中增加一个变量,angularjs,angularjs-scope,Angularjs,Angularjs Scope,我有这个密码： <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 n

我有这个密码：

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

我试图制作一个脚本，当你点击链接时，有一个变量会增加，这样父对象就可以得到一个类活动的递增变量。问题是，当我点击一个链接，变量增加时，它会更新所有变量的类

示例：我单击第一个链接，它将我作为类设置为active-1，然后我单击第二个链接，它将我设置为active-2，但首先我也将设置为active-2，我希望它保持active-1

我希望你能帮我写这个剧本

链接到

如果要单独更新，则需要为其设置不同的计数器。在本文中，我将var反单击修改为数组，并将html更新为使用id 0和1表示数字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>

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

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

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

因此，我尝试对你的问题进行另一种解释：

你想要：

能够单独激活你的s，并提供一个类active-1为一个active-2为两个。。。当点击一个按钮时，它应该被激活并被赋予适当的类别因此，我根据先前的回答对Plunker进行了一些修改，您可以找到新的Plunker

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>

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

activate函数将var增量增加1，而getCounter函数只返回增量变量。您能把代码放在这里吗？谢谢，但它没有像我预期的那样工作。。点击第一个链接它会添加active-1，点击第二个链接它会添加active-1，但它应该是active-2:S无论如何，谢谢你，在哪方面它没有达到你的期望？也许你可以澄清你的问题，这样就没有误解的余地了？

(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);

/* Styles go here */

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

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