CODEWITHSUNDEEP
angularjsdirective
Scopi
Scopi

Reputation: 673

Directive for ng-show/hide functionally in angular

I have 3 buttons(a href) - click on one of them will need to disable the others and do a functionality like replace image and replace the color of the "active/non active" and also do another stuff like slide a div on click

what is the best way to do that in angular , for now I have direcitve and I do that like the following: 

     if(attrs.id == "btn1")
         {
            scope.btn1  = true;
            scope.btn2  = false;
            scope.btn3  = false;
            scope.anotherData = false;
         }
         else if(attrs.id == "btn3"){
             scope.btn1  = false;
            scope.btn2  = false;
            scope.btn3  = true;
            scope.anotherData = false;
         }
         else {
             scope.btn1  = false;
            scope.btn2  = true;
            scope.btn3  = false;
            scope.anotherData = true;

         }


        if(attrs.id == "btn1")
        {
          $('.btn1').css('color',scope.activeColor);
          $('.btn2').css('color',scope.color);
          $('.btn3').css('color',scope.color);
        }
        else if(attrs.id == "btn3"){
          $('.btn1').css('color',scope.color);
          $('.btn3').css('color',scope.activeColor);
          $('.btn2').css('color',scope.color);
        }
        else {
          $('.btn2').css('color',scope.color);
          $('.btn3').css('color',scope.color);
          $('.btn1').css('color',scope.activeColor);
        }

Upvotes: 0

Views: 49

Answers (1)

Sachila Ranawaka
Sachila Ranawaka

Reputation: 41445

Best thing you can do is create an array and loop it using ng-repeat

angular.module("app",[])
.controller("ctrl",function($scope){
$scope.buttons = [
{"id":"btn1","class":"active", },{"id":"btn2","class":"active", },{"id":"btn3","class":"active", }
]

$scope.clickFunc= function(index){
  for(var i=0; i<= $scope.buttons.length-1; i++){
    if(index !== i){
       $scope.buttons[i].class = "not-active";
       
    }
  }
}
})
.active{
 color : blue
}
.not-active{
 color : red;
 pointer-events: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <div  ng-repeat="item in buttons">
 <a id="{{item.id}}" href="#"  ng-click="clickFunc($index)" ng-class="item.class" >{{item.id}}</a>
 </div>
</div>

Upvotes: 3

Related Questions