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

Question

The solution I'm trying to attain in a nutshell, is deleting the class clicked from every element with a certain class name or ng-class name or ng-model name, then adding the class name on the button that was clicked.

I have some elements that are repeated using ng-repeat throughout the page. They're not in the same areas on the page. Is there anyway that either $scope or a directive can remove a class from every element that has that ng-model or every child elementon that page?

Directive:

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

This code is only applicable to the elements next to/around the element that was clicked. I'm trying to make the removeclass() function apply to all elements with that ng-model name on the page.

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>

I've switched some elements and values of course, so some values might not make sense as to why they are that value.

Say for example the first ng-repeat loops twice and so does the second, if I were to click on any button element on the first loop, then clicked on another button element anywhere else, I want to be able to clear ALL buttons with ng-model as myModel. Then when all else is cleared from this class, the element that was clicked gets the class added. Is this possible?

Or can I do this with an ng-click function?

If this is possible with ng-class, can someone please provide a coded solution as to how this is possible?

Answer 1

For this situation. I think you should look into using ngClass.

Edit: Kindly try this logic. Haven't got to chance to debug it myself though

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

in your js

var prevElem;

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

Just add logic to make prevElem to the current element you clicked on your click event.