Angularjs Manipulate each ng-repeat elements

Question

I have a Custom directives that acts as a widget containing a list of buttons based on parameters passed in setting .

Setting passed in ng-repeat

$scope.btnGroup = [{"name":"toggle 1"},{"name":"toggle 2"}];

HTML

<div ng-controller="toggleButtonController" ng-init="init()" id="parent">
<div ng-repeat="btn in setting" style="display:inline">
    <button class="btn btn-default" ng-bind="btn.name" ng-click="click()"></button>
</div>

So right now, my scenario is when i click one of the buttons, it will set the clicked button to btn-primary class and others to btn-default class and vice versa.

CONTROLLER

 var app = angular.module('toggleButtonMod', [])
 app.directive('toggleButton', function() {
 return {
     restrict: 'E',
     scope: {
         setting: '='
     },
     templateUrl: "app/Shared/togglebutton/toggleButtonView.html"
 }
})
app.controller("toggleButtonController", function($scope) {
 $scope.init = function() {
     $scope.setupContent();
 }
 $scope.setupContent = function() {

 }
 $scope.click = function(event) {
  console.log(event);
  //here to change all the buttons in ng-repeat to btn-default class and the 
  //clicked button btn-primary class
 }
})

Im stucked at the click function here..I have no idea how to manipulate each buttons in ng-repeat and modify their css class accordingly.

Answer 1

You can give the directive a controller and pass the directive's scope to the controller. With access to the scope, you can store a value that can be used in the template to conditionally add the class (using ngClass).

Directive:

.directive('toggleButton', function() {
 return {
     restrict: 'E',
     scope: {
         setting: '='
     },
     templateUrl: "app/Shared/togglebutton/toggleButtonView.html", 
     controller: function($scope){
       $scope.toggleButton = {selected: null};
     }
 }
})

Template:

<div ng-repeat="btn in setting" style="display:inline">
    <button class="btn" ng-class="{'btn-primary': btn === toggleButton.selected, 'btn-default': btn !== toggleButton.selected}" ng-bind="btn.name" ng-click="toggleButtonSelection(btn)"></button>
</div>

Note: Because ngRepeat creates a new scope for each item in the collection, in this case the value must be stored as an object property so that it is not shadowed in the item's scope and always references the directive's scope.

https://plnkr.co/edit/3xTpOFgpfYA99iKOi0rB?p=preview

Answer 2

in your html code add id attribute to button like as I have done in below code

<div ng-controller="toggleButtonController" ng-init="init()" id="parent">
<div ng-repeat="item in setting" style="display:inline">
    <button class="btn btn-default" id= "item.name" ng-bind="item.name" ng-click="click($event)"></button>
</div>

    $scope.click = function(event) {

       var id = event.target.id;
       var btn = document.getElementById(id);
  if(btn.classList.contains('btn-default')){
            btn.classList.remove('btn-default');
      }
  btn.classList.add('btn-primary');
    angular.forEach(setting, function(value, key) {
         var button = document.getElementById('value.name');
        if(button.classList.contains('btn-primary')){
                button.classList.remove('btn-primary');
           }
           button.classList.add('btn-default');
        }); 

     }