在AngularJs中獲取和設置元素的類

Question

我已經將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不是函數”錯誤。 嘗試將“類”切換為“ ng-類”時，我遇到了另一個問題：CSS文件無法識別“ ng-class”。

有什么方法可以直接獲取/設置“ class”屬性？

Answer 1

嘗試按照以下代碼段。

 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

Answer 2

您可以使用本地的classList屬性 ，它可以為您提供很多幫助：

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

Answer 3

試試下面的代碼而不是你的代碼

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

另外，為什么ng-class對您不起作用？ 它應該可以正常工作，我認為您的CSS文件可能不匹配。

Answer 4

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