Динамически добавлять класс в элемент, используя AngularJS

Я хочу подражать тому, что я сделал с JQuery с помощью AngularJS,

Ниже скрипка для этого.

Три вещи, которые я сделал здесь.

  1. Найдите последний элемент в правом столбце.
  2. Возьмите с него атрибут data-color
  3. Присвойте значение атрибута как класс 'правой колонке'

2 ответа

Решение

Попробуйте это JSFiddle: https://jsfiddle.net/ubqrah1w/

Он использует угловую директиву.

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

Это может быть сделано с помощью директивы angular'js (повторно используемый компонент), кроме того, в angular есть jqlite (библиотека jQuery), как показано ниже.

директивы:

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

Другие вопросы по тегам