Onclick按鈕更改AngularUI

Question

我想使6個按鈕是可選的。添加兩個以上時遇到問題。第三個按鈕是選擇其他按鈕，並且這些按鈕在單擊兩次時取消選擇自己。這是不希望的。一團糟。任何人都可以幫我解決這個問題嗎？ 這裏是我的代碼：

<div ng-app="plunker"> 
     <div ng-controller="MainCtrl"> 
      <button type="button" class="btn" ng-class="{'btn-primary':isUploadActive}" ng-click="toggleActive1()">Upload</button> 

      <button type="button" class="btn" ng-class="{'btn-primary':isDownloadActive}" ng-click="toggleActive2()">Download</button>   
     </div>  
    </div> 

var app = angular.module('plunker', []); 
app.controller('MainCtrl', function($scope) { 
    $scope.button1Active = false; 
    $scope.button2Active = false; 
     $scope.button3Active = false; 
      $scope.button4Active = false; 
       $scope.button5Active = false; 
        $scope.button6Active = false; 

    $scope.toggleActive1 = function() { 
     if($scope.button2Active) { 
      $scope.button2Active = !$scope.button2Active; 
     } 
     $scope.button1Active = !$scope.button1Active; 
    }; 

    $scope.toggleActive2 = function() {  
     if($scope.button1Active) { 
      $scope.button1Active = !$scope.button1Active; 
     } 
     $scope.button2Active = !$scope.button2Active; 
    }; 
    $scope.toggleActive3 = function() {  
     if($scope.button3Active) { 
      $scope.button3Active = $scope.button3Active; 
     } 
     $scope.button2Active = !$scope.button2Active; 
     $scope.button1Active = !$scope.button1Active; 
      $scope.button4Active = !$scope.button4Active; 
      $scope.button5Active = !$scope.button5Active; 
      $scope.button6Active = !$scope.button6Active; 
    }; 
}); 



<div id="contentDiv"> 

    <div ng-app="plunker"> 
    <div ng-controller="MainCtrl"> 
     <button type="button" class="btn" ng-class="{'btn-primary':button1Active}" ng-click="toggleActive1()">Upload</button> 

     <button type="button" class="btn" ng-class="{'btn-primary':button2Active}" ng-click="toggleActive2()">Download</button>   
     <button type="button" class="btn" ng-class="{'btn-primary':button3Active}" ng-click="toggleActive3()">Purchased</button> 
    </div>  
</div> 

Answer 1

哎呀！這有點凌亂。我做了，似乎你想要做什麼小提琴：http://jsfiddle.net/qwah3/

基本上我只是給控制器一個範圍的對象保持激活按鈕，每個按鈕只檢查針對該值：

function myCtrl($scope) { 
    $scope.active = { val : '' }; 
    $scope.Activate = function(buttonVal) { 
    $scope.active.val = buttonVal; 
    }; 
} 

這意味着每個按鈕可以是這樣的：

<button type="button" class="btn" ng-class="{'btn-primary':active.val == 'Download'}" 
     ng-click="Activate('Download')">Download</button> 

你甚至可以將按鈕變成指令，使它更容易。

希望這有助於！