有关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>