有關ng-show/hide功能的指令

Question

我有3個按鈕（a href） - 點擊其中一個將需要禁用其他按鈕，並執行替換圖像等功能，並替換「active/non主動」，也做其他的東西像幻燈片上點擊

是什麼做的，在角的最佳方式股利，現在我有direcitve，我是這樣做的以下內容：

 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); 
     } 

Answer 1

最好的事情你可以做的是創建一個數組並循環使用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>