CODEWITHSUNDEEP
angularjsbuttonangular-ui
user3159568
user3159568

Reputation: 41

Change button color onclick AngularUI

I have two buttons. When I click one they both turn blue. Can anyone explain to me how to make it so that on the only selected is blue and when it is not selected goes back to white? Here's my site: http://test.shibagames.com

Also why does the dropdown not work when I click it?

Upvotes: 0

Views: 5073

Answers (3)

msapkal
msapkal

Reputation: 8346

You could also do something like this.

<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;
    };
});

Updated source to toggle

<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;
    };

});

Upvotes: 1

Matt Way
Matt Way

Reputation: 33179

The reason why both buttons turn blue, is because both buttons are associated with the same state variable $scope.isActive. You need to keep two different state variables to manage both buttons.

Also the reason why the dropdown doesn't show is because bootstraps javascript won't work in its default form with angular. You need to use something like angular-ui-bootstrap, http://angular-ui.github.io/bootstrap/

EDIT (updated):

You could do the buttons as follows:

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

Note that you usually don't need to turn off btn-default, as btn-primary should override the styles anyway (but that is up to you).

Then have the scope function:

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

As for ui-bootstrap not working, you really need to follow the simple instructions on the website front page. Under installation it explains that you need to add the ui.bootstrap module dependency:

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

Upvotes: 3

Ryan Q
Ryan Q

Reputation: 10683

The issue is your changing the btn class to btn-primary when the scope variable isActive is true. Therefore by clicking either one the toggleActive() is fired setting the isActive to true and turning both "blue".

The simple solution is something like:

<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>

Upvotes: 1

Related Questions