Кнопка Onclick Change 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> 

Вы даже можете превратить кнопку в директиву, чтобы сделать ее еще проще.

Надеюсь, это помогло!