AngularJS：如何使用指令从具有特定 ng-model 的所有元素中动态删除 class？

Question

简而言之，我试图获得的解决方案是从具有特定 class 名称或 ng-class 名称的每个元素中删除 class clicked 或ng-model 名称，然后在单击的按钮上添加 class 名称。

我有一些元素在整个页面中使用 ng-repeat 重复。它们不在页面上的同一区域。 $scope 或指令是否可以从每个具有 ng-model 的元素或该页面上的每个子元素中删除 class？

指令：

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

此代码仅适用于 to/around 被单击元素的下一个元素。我正在尝试使 removeclass() 函数应用于页面上具有该 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's 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 的所有按钮。然后，当从 class 中清除所有其他内容时，被单击的元素将添加 class。这可能吗？

或者我可以使用 ng-click 函数来实现吗？

如果 ng-class 可以做到这一点，请问有人可以提供编码解决方案吗？

Answer 1

对于这种情况。我认为您应该考虑使用 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 成为您在点击事件中点击的当前元素。

AngularJS：如何使用指令从具有特定 ng-model 的所有元素中动态删除 class？

AngularJS: How to use directives to dynamically remove class from all elements with specific ng-model?

angularjs

angularjs-ng-repeat

angular-ngmodel

removeclass

angularjs-ng-model