Css 如何为每个元素分别更改类？（角度）_Css_Angularjs

Css 如何为每个元素分别更改类？（角度）

css angularjs

Css 如何为每个元素分别更改类？（角度）,css,angularjs,Css,Angularjs,我有一个演示，当点击它改变了类回来和价值，但我不知道如何改变他们分开下面是一个演示，以获得更好的解释：我可以用class2、class3等向js添加类似的代码行，但问题是这个类会重复很多次。如果你对如何解决这个问题有任何想法，那就太好了。先谢谢你 $scope.changeClass = function(){ if ($scope.class === "rotated") $scope.class = "rotated2"; else

我有一个演示，当点击它改变了类回来和价值，但我不知道如何改变他们分开

下面是一个演示，以获得更好的解释：

我可以用class2、class3等向js添加类似的代码行，但问题是这个类会重复很多次。如果你对如何解决这个问题有任何想法，那就太好了。先谢谢你

$scope.changeClass = function(){
        if ($scope.class === "rotated")
            $scope.class = "rotated2";
        else
            $scope.class = "rotated";
    };

让我们考虑一下每个部分的make指令：

<div ng-class="class">{{class}}</div>
<button ng-click="changeClass()">Change Class</button>

{{class}
换班

然后，您可以控制每个指令内的作用域，并且以后可以很容易地进行扩展

这是一个例子：

这个怎么样

控制器

var app = angular.module("ap",[]);

app.controller("con",function($scope){

    $scope.klasses = ["red", "blue", "yellow"];
    $scope.klassIndex = 0;

    $scope.changeClass = function(){
        var newKlassIndex = ($scope.klassIndex+1)%$scope.klasses.length;
        $scope.klassIndex = newKlassIndex;
    };
});

查看

<body ng-app="ap" ng-controller="con">
  <div ng-repeat="klass in klasses">
    <div ng-class="klasses[klassIndex]">{{klasses[klassIndex]}}</div>
    <button ng-click="changeClass()">Change Class</button>
  </div>
</body>


{{klasses[klassIndex]}
换班

通过这种方式，可以使用新的相应CSS规则将新类添加到$scope.klasss

工作演示

只需将

类更改为数组，然后传递每个索引：
$scope.changeClass = function(i){
    if ($scope.class[i] === "red")
        $scope.class[i] = "blue";
     else
        $scope.class[i] = "red";
};

HTML：
<body ng-app="ap" ng-controller="con">
    <div ng-class="class">{{class}}</div>
    <button id="button1" ng-click="changeClass($event)">Change Class</button>   
   <div ng-class="class1">{{class1}}</div>
    <button id="button2" ng-click="changeClass($event)">Change Class</button>   
</body>


我应该对代码进行更多的重构。然而，我最初的想法是，您需要将$event
与您的ng单击一起传递，并向按钮提供id，以便通过event.currentTarget.id
唯一地识别它们
另外，由于同一组元素使用了两次，因此使用指令来拨弄Nghi-Nguyen也更有意义。将它们封装在指令中。这样，您甚至不必使用$event来确定按钮的id，控制器将只处理特定指令的changeClass
EDIT1:
var app = angular.module("ap",[]);

app.controller("con",function($scope){

$scope.class = "red"; // default class

 $scope.changeClass = function($event){
    if ($($event.target).prev().hasClass('red')) {
    $($event.target).prev().removeClass('red').addClass('blue');
  } else {
    $($event.target).prev().removeClass('blue').addClass('red');
  }
  };
 });

HTML:

{{class}}
换班
{{class}}
换班
通常，重复元素会与范围模型中的重复数据结构相关联。然后，您可以使用每个项目的属性来帮助确定适当的类。你似乎过度简化了演示。您的真实世界用例是什么？我正在制作可折叠的内容，当您单击svg图像时，它会旋转-90度，问题是如果我单击任何svg，则会对每个svg应用类更改。确定。。。。但内容部分/svg是否不是基于控制器中的数据模型呈现的？这就是angular应用程序通常在controller中工作的方式。您将只找到我上面写的示例，没有其他关于svg.OK的内容。所以您需要控制器中的数据模型，然后将其用于单个svg。或者编写一个封装重复UI组件的指令。然后每个指令实例都会有自己的作用域。类与其他实例隔离可能你误解了我的问题，我的目标是使单击每个按钮都会分别更改，现在它们只是一次更改，与我在演示中显示的问题相同。嗯，抱歉，我不明白你的意思，你写的代码和我的例子完全一样。糟糕的家伙。我试图让示例占用我一点时间，但希望可以帮助您：我不确定这是否有效，但在我的情况下，我不能使用任何模板，它应该查找class=“class”。类型学家的答案几乎和预期的一样。嘿，你的答案在某种程度上是正确的，但现在还有另一个问题。如果我单击红色方块，它将为每个ng重复元素更改。有没有办法解决这个问题？我会把你的答案标记为正确答案，你基本上做了我想要的。我可能会针对我现在遇到的另一个问题创建一个新线程。干杯，发布一个新的（可能有另一个类你正在使用你的箭头的颜色？）。嘿，谢谢你的回答。我希望避免添加更多属性。应该有很多更简单的方法来做到这一点，就像类型学家所写的那样。我想你的答案和我评论他的答案时的问题是一样的。对不起，这不起作用。你能看看排版专家的答案和当前的问题吗？当你为你的问题创建一个新的线程时，请发布链接
var app = angular.module("ap",[]);

app.controller("con",function($scope){

$scope.class = "red"; // default class

 $scope.changeClass = function($event){
    if ($($event.target).prev().hasClass('red')) {
    $($event.target).prev().removeClass('red').addClass('blue');
  } else {
    $($event.target).prev().removeClass('blue').addClass('red');
  }
  };
 });

<body ng-app="ap" ng-controller="con">
    <div ng-class="class">{{class}}</div>
    <button ng-click="changeClass($event)">Change Class</button>   
   <div ng-class="class">{{class}}</div>
    <button ng-click="changeClass($event)" >Change Class</button>   
</body>