Question

我有3个按钮（一个href） - 点击其中一个将需要禁用其他人并执行替换图像和替换“活动/非活动”的颜色等功能，并执行其他操作，如幻灯片a div点击

在角度方面做到这一点的最好方法是什么，现在我有直接的做法，我就像下面这样做：

     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命令用于角度功能

1 个答案: