0

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.

  1. Find the last element of the right column.
  2. Pickup the attribute 'data-color' from it
  3. Assign the value of the attribute as a class to the 'right-col'
RIYAJ KHAN
  • 15,032
  • 5
  • 31
  • 53
nipiv
  • 773
  • 1
  • 8
  • 21
  • @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 Feb 01 '16 at 13:52

2 Answers2

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

Shushanth Pallegar
  • 2,832
  • 1
  • 14
  • 16
  • thanks a lot :) ur right.. but the above one was to the point.. but thanks a lot dude.. – nipiv Feb 01 '16 at 12:38
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'));
    }
  }
  });
Christina
  • 1,136
  • 11
  • 16
  • Well doesnt work if i add the JS in a seperate file.. or in fiddle in the JS page.https://jsfiddle.net/ubqrah1w/1/ – nipiv Feb 01 '16 at 12:58
  • you have to load the javascript in the body, check this https://jsfiddle.net/yLtq1296/ – Christina Feb 01 '16 at 14:35