在 AngularJs 中获取和设置元素的类答案

【问题标题】：Get and Set class of an element in AngularJs在 AngularJs 中获取和设置元素的类
【发布时间】：2017-01-17 09:23:49
【问题描述】：

我已将 ng-click 添加到我的图标中，如下所示：

<img src="images/customer_icon.png" class="customer" ng-click="processForm($event)">

这是 js 文件。

   var app = angular.module('myapp', []);
    app.controller('mycontroller', function($scope) {
        $scope.processForm = function(obj) {
            var elem = angular.element(obj);
            alert("Current class value: " + elem.getAttribute("class"));
       };
    });

我收到“elem.getAttribute 不是函数”错误。试图将“class”切换到“ng-class”时，我遇到了另一个问题：我的 css 文件无法识别“ng-class”。

有什么方法可以直接获取/设置“类”属性？

【问题讨论】：

标签： javascript jquery html angularjs attributes

【解决方案1】：

试试下面的代码而不是你的代码

var elem = obj.target.attributes.class.value;

还有为什么ng-class 不适合你？它应该可以工作，我认为您的 CSS 文件可能不匹配。

【讨论】：

【解决方案2】：

尝试跟随 sn-p。

var app = angular.module('myapp', []);
app.controller('mycontroller', function($scope) {
    $scope.processForm = function(event) {
      var element = angular.element(event.target);
      //Old Class
      console.log("OLD CLASS : " + element.attr('class'));
      element.removeClass('customer').addClass("newClass");
      //New Class
      console.log("NEW CLASS : " + element.attr('class'));
    };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp" ng-controller="mycontroller">
<img src="http://placehold.it/200x100" class="customer" ng-click="processForm($event)">
</div>

更多信息angular.element

【讨论】：

【解决方案3】：

elem 是一个数组，所以你必须使用 elem[0]:

$scope.processForm = function(obj) {
   var elem = angular.element(obj.currentTarget);// or angular.element(obj.target);
   alert("Current class value: " + elem[0].getAttribute("class"));
};

【讨论】：

【解决方案4】：

您可以使用原生的the classList property，它可以为您提供很多帮助：

div.classList.remove("foo");
div.classList.add("anotherclass");
div.classList.toggle("visible");
console.log(div.classList.contains("foo"));

【讨论】：