Динамически применять атрибуты к элементам DOM в ngRepeat в директиве

Question

Динамически применять атрибуты к элементам DOM в ngRepeat в директиве

0

Я создаю директиву dropdown-menu в угловом и имеет представление.

Есть ли в любом случае, что я могу extend "список" attributes для элемента DOM в nr-repeat?

<li ng-repeat="item in menuItems" ng-init="extend((current_element).attributes, item.attributes)" />

Моя единственная проблема заключается в том, что я не знаю, как получить то, что я повторно использовал как current_element выше. Может быть, даже лучше просто передать current_element функции:

<li ng-repeat="item in menuItems" ng-init="attributeExtend(current_element, item)" />

Чтобы быть более наглядным, скажем, у меня есть массив:

var menuItems = [
    {
        label: "One"
        attributes: {
            style: "background-color: blue"
        }
    },
    {
        label: "Two"
        attributes: {
            style: "background-color: red"
        }
    },
    {
        label: "Three"
        attributes: {
            style: "background-color: green"
        }
    }
];

.., который я использую для моего ng-repeat.

Теперь, когда я ввожу свою функцию, ng-init моим ng-init:

<!--HTML-->
    <li class="upper-li" ng-repeat="item in menuItems" ng-init="extend(current_element, item, $index)" />

<!--SCRIPT-->
    scope.extend = function(elem, item, $index)
    {
        /*
            elem should be equal to:

                $element.find('li.upper-li')[0].children[$index]

            ..which I've discovered I can use as a work around,
            but I am still looking for my answer...
        */

        for(var key in item.attributes)
        {
            elem.setAttribute(key, item.attributes[key]);
        }
    }

Мне просто нужен лучший способ сделать это. Благодарю.

WebWanderer 25 июнь 2015, в 21:08

Источник

Теги:

javascript

angularjs

1 ответ

Ещё вопросы

Alex P · Answer 1 · 2015-06-25T19-03-00.000Z

Возможным и простым способом extend атрибутов элемента DOM является динамическое создание выпадающего списка с элементами внутри директивы.

 .directive("dropdown", function() {
      return function(scope, element, attrs) {
        var data = scope[attrs["dropdown"]];
        if (angular.isArray(data)) {
          var listElem = angular.element("<select>");
          element.append(listElem);
          for (var i = 0; i < data.length; i++) {
            var option = angular.element('<option>'); 
            for(var key in data[i].attributes)
            {
                option.attr(key, data[i].attributes[key])
            }
            listElem.append(option.text(data[i].label));
          }
        }
      }
    });

Plunker http://plnkr.co/edit/pj8QedIpbyUZVYyopQ5R

тьфу ... да, это работает, но я стараюсь избегать создания / манипуляции с элементами DOM через Javascript, когда могу, по крайней мере, когда использую Angular. Тем не менее, правильный ответ. +1