AngularJS: Как использовать директивы для динамического удаления класса из всех элементов с определенной ng-моделью?

0

Решение, которое я пытаюсь выполнить в двух словах, это удаление класса, clicked по каждому элементу с определенным именем класса или именем ng-class или именем ng-model, а затем добавлением имени класса на нажатой кнопке.

У меня есть некоторые элементы, которые повторяются с помощью ng-repeat всей странице. Они не находятся в тех же областях на странице. Есть ли в любом случае, что либо $scope либо директива может удалить класс из каждого элемента, который имеет эту ng-model или каждый дочерний элемент этой страницы?

Директива:

app.directive('sibs', function () {
    return {
        link: function (scope, element, attrs) {
            element.bind('click', function () {
                element.parent().children().removeClass('clicked');
                element.addClass('clicked');
            })
        },
    }
});

Этот код применим только к элементам рядом с/вокруг элемента, который был нажат. Я пытаюсь сделать функцию removeeclass() применимой ко всем элементам с этим именем ng-model на странице.

HTML:

<div>
    <div ng-repeat="a in MyArray" ng-show="isSet(a.ID)">
        <input sibs type="button" id="{{a.ID}}" ng-model="myModel" value="1" ng-click="selected(1)" />
        <input sibs type="button" id="{{a.ID+1}}" ng-model="myModel" value="2" ng-click="selected(2)" />
        <input sibs type="button" id="{{a.ID+2}}" ng-model="myModel" value="3" ng-click="selected(3)" />
        <input sibs type="button" id="{{a.ID+3}}" ng-model="myModel" value="4" ng-click="selected(4)" />
    </div>
</div>

<p> There more code here inbetween these parts </p>

<div>
    <div ng-repeat="a in MyArray" ng-show="isSet(a.ID)">
        <input sibs type="button" id="{{a.ID}}" ng-model="myModel" value="1" ng-click="selected(1)" />
        <input sibs type="button" id="{{a.ID+1}}" ng-model="myModel" value="2" ng-click="selected(2)" />
        <input sibs type="button" id="{{a.ID+2}}" ng-model="myModel" value="3" ng-click="selected(3)" />
        <input sibs type="button" id="{{a.ID+3}}" ng-model="myModel" value="4" ng-click="selected(4)" />
    </div>
</div>

Я, конечно же, переключил некоторые элементы и значения, поэтому некоторые значения могут не иметь смысла, почему они являются этой ценностью.

Скажем, например, первые циклы ng-repeat дважды, а также вторая, если бы я нажал на любой элемент кнопки в первом цикле, а затем щелкнул по другому элементу кнопки в другом месте, я хочу, чтобы убрать все кнопки с помощью ng-model в myModel. Затем, когда все остальные очищаются от этого класса, элемент, который был нажат, добавляет класс. Это возможно?

Или я могу сделать это с помощью функции ng-click?

Если это возможно с ng-class, может ли кто-нибудь предоставить закодированное решение о том, как это возможно?

  • 0
    Во-первых, почему существует ngModel => <div ng-model="outsideModel"> ?
  • 0
    @developer033 developer033 Нет причин для этого, я могу это убрать. Поместите это в последнюю минуту, чтобы поэкспериментировать с.
Показать ещё 4 комментария
Теги:
angular-ngmodel
angularjs-ng-model
angularjs-ng-repeat
removeclass

1 ответ

0
Лучший ответ

Для этой ситуации. Я думаю, вы должны изучить использование ngClass.

Изменение: Просьба пробовать эту логику. Не иметь возможности самостоятельно отлаживать его, хотя

ng-class="{'clicked': condition(a, $first)}" //a = element from repeat

в вашем js

var prevElem;

$scope.condition(element, isFirst){
  var x = prevElem == element;
 if(isFirst $$ prevElem != null)
   x = false;
 if(!x)
   prevElem = element;
 return !x;
}

Просто добавьте логику, чтобы сделать prevElem текущему элементу, который вы нажали на событие click.

  • 0
    Если вы можете предоставить небольшой код о том, как сделать это с текущей ситуацией и моим данным кодом, я дам вам ответ. Я думал об использовании этого подхода, но я немного растерялся относительно того, как действовать дальше.
  • 0
    Просто, чтобы прояснить ситуацию, основываясь на этом утверждении: « если бы я щелкнул по любому элементу кнопки в первом цикле, а затем щелкнул по другому элементу кнопки в другом месте, я хочу иметь возможность очистить ВСЕ кнопки », для которого требуется только один ввод содержать кликнувший класс?
Показать ещё 5 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню