Изменить цвет кнопки onclick AngularUI

Question

У меня есть две кнопки. Когда я нажимаю один, они оба становятся синими. Может ли кто-нибудь объяснить мне, как сделать так, чтобы на единственном выбранном синем и когда он не выбран, возвращается к белому? Мой сайт: http://test.shibagames.com

Также почему выпадающее меню не работает, когда я нажимаю на него?

Answer 1

Причина, по которой обе кнопки становятся синими, состоит в том, что обе кнопки связаны с одной и той же переменной состояния $scope.isActive. Для управления обеими кнопками необходимо сохранить две переменные состояния.

Также причина, по которой выпадающее меню не отображается, заключается в том, что javascript не работает в форме по умолчанию с угловым. Вы должны использовать что-то вроде углового-UI-загрузчике, http://angular-ui.github.io/bootstrap/

EDIT (обновлено):

Вы можете сделать кнопки следующим образом:

ng-class="{'btn-primary': active == 'upload'}" ng-click="activateButton('upload')" 

Обратите внимание, что вы обычно не нужны выключите btn-default, так как btn-primary должны переопределить стили в любом случае (но это зависит от вас).

Тогда имеют область видимости функции:

$scope.activateButton = function(name) { $scope.active = name; } 

Что касается ш-самозагрузки не работает, вам действительно нужно следовать простым инструкциям на странице сайта на передней панели. При установки объясняет, что вам нужно добавить зависимость модуля ui.bootstrap:

angular.module('myModule', ['ui.bootstrap']); 

Answer 2

Выпуск ваш изменяющийся класса БТНА для БТНА-первичным, когда объем переменной isActive верно. Поэтому, щелкнув либо один, то toggleActive() уволен, установив isActive в true и поворачивая оба «синих».

Самое простое решение что-то вроде:

<button type="button" class="btn btn-default" ng-class="{'btn-primary':isActiveUpload, 'btn-default':!isActiveUpload}" ng-click="isActiveUpload = !isActiveUpload">Upload</button> 

<button type="button" class="btn btn-default" ng-class="{'btn-primary':isActiveDownload, 'btn-default':!isActiveDownload}" ng-click="isActiveDownload = !isActiveDownload">Download</button> 

Answer 3

Вы также могли бы сделать что-то вроде этого.

<div ng-app="plunker"> 
    <div ng-controller="MainCtrl" ng-init="buttons = [ {name : 'Upload', isActive :true},{name : 'Download', isActive : false}]"> 
     <button type="button" ng-repeat="btn in buttons" class="btn" ng-class="{'btn-primary':btn.isActive, 'btn-default':!btn.isActive}" ng-click="toggleActive(btn)">{{btn.name}}</button> 
    </div>  
</div> 


var app = angular.module('plunker', []); 
app.controller('MainCtrl', function($scope) { 
    $scope.toggleActive = function(btn) {  
     btn.isActive = !btn.isActive; 
    }; 
}); 

Обновлённый для переключения

<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.isUploadActive = false; 
    $scope.isDownloadActive = false; 

    $scope.toggleActive1 = function() { 
     if($scope.isDownloadActive) { 
      $scope.isDownloadActive = !$scope.isDownloadActive; 
     } 
     $scope.isUploadActive = !$scope.isUploadActive; 
    }; 

    $scope.toggleActive2 = function() {  
     if($scope.isUploadActive) { 
      $scope.isUploadActive = !$scope.isUploadActive; 
     } 
     $scope.isDownloadActive = !$scope.isDownloadActive; 
    }; 

});