Dynamically Add class to Element using AngularJS

Question

I want to mimic something that I have done with JQuery using AngularJS.

Below is the fiddle for it.

Three things I have done here.

Find the last element of the right column.
Pickup the attribute 'data-color' from it
Assign the value of the attribute as a class to the 'right-col'

@georgegeawg: The link is already there in the question. The text "fiddle" has a link to it. The question is already been answered too. — nipiv
– nipiv, Commented Feb 1, 2016 at 13:52

Christina · Accepted Answer · 2016-02-01 11:52:09Z

1

Try this JSFiddle: https://jsfiddle.net/ubqrah1w/

It uses an angular directive.

.directive('lastColor', function () {
  return {
    restrict: 'A',
    link: function ($scope, $element, $attrs) {
    $element.addClass(angular.element($element[0].querySelector('.items:last-child')).attr('data-color'));
    }
  }
  });

answered Feb 1, 2016 at 11:52

Christina

1,12611 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

nipiv Over a year ago

Well doesnt work if i add the JS in a seperate file.. or in fiddle in the JS page.jsfiddle.net/ubqrah1w/1

Christina Over a year ago

you have to load the javascript in the body, check this jsfiddle.net/yLtq1296

Shushanth Pallegar · Accepted Answer · 2016-02-01 11:44:07Z

1

This can be done by angular'js directive (re-usable component) moreover angular has jqlite (jQuery library), as below.

directives:

app.directive('dynamicColor',dynamicColor);

    dynamicColor.$inject = [];

    function dynamicColor(){

      return{
        restrict:'A',
        link:function(scope,element,attrs){
          element.css('background-color',attrs.dynamicColor);
        }
      }

    }

https://plnkr.co/edit/Op5fI5oFQku07tkebBcg?p=preview

answered Feb 1, 2016 at 11:44

Shushanth Pallegar

2,8721 gold badge17 silver badges17 bronze badges

1 Comment

nipiv Over a year ago

thanks a lot :) ur right.. but the above one was to the point.. but thanks a lot dude..

Collectives™ on Stack Overflow

Dynamically Add class to Element using AngularJS

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related