CODEWITHSUNDEEP
javascriptjqueryhtmlangularjsattributes
Chernogorskiy Fedor
Chernogorskiy Fedor

Reputation: 95

Get and Set class of an element in AngularJs

I've added the ng-click to my icon like this:

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

And here's the js-file.

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

I'm getting the "elem.getAttribute is not a function" error. Trying to switch "class" to "ng-class", i faced another problem: "ng-class" is not recognised by my css files.

Is there any way I can get/set the "class" attribute directly?

Upvotes: 1

Views: 12425

Answers (4)

J&#233;r&#233;my Giuseppi
J&#233;r&#233;my Giuseppi

Reputation: 393

You can use the classList property which is native and can help you a lot :

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

Upvotes: 2

Mohit Tanwani
Mohit Tanwani

Reputation: 6638

Try following snippet.

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>

More information angular.element

Upvotes: 2

Van Nguyen
Van Nguyen

Reputation: 76

elem is an array, so you have to use 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"));
};

Upvotes: 1

Ramesh R
Ramesh R

Reputation: 13

Try this below code instead of yours

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

Also Why ng-class is not working for you? It's should be working, I think you may be mismatched your CSS file.

Upvotes: 1

Related Questions