ng-show/hide 在 angular 中的功能指令

Question

我有 3 个按钮 (a href) - 单击其中一个将需要禁用其他按钮并执行替换图像和替换 "active/non active" 颜色等功能，还可以执行其他操作，例如幻灯片a div 点击

在 angular 中做到这一点的最佳方法是什么，现在我有 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>

ng-show/hide 在 angular 中的功能指令

Directive for ng-show/hide functionally in angular

directive

angularjs