AngularJs change button text as well as color

Question

Hi I am trying to change color as well as text of a button i.e. switch between two texts & colors. Suspend/unsuspend text and red/green color.

What I want to do is for the moment (because later, server will give info about whether user is suspended or not) randomly give them any one of these two texts&colors, and I click on button it should turn to other text & color.

I tried but I am wrong somewhere and I cant find it. Please help. And if there is any better way then please suggest to me, I am new to angular.

HTML:

<button type="button" class="btn btn-danger" ng-if="checkStatus(person.isSuspended)" ng-click="person.isSuspend=suspendUser(!person.isSuspend)">{{suspendText}}</button>
<button type="button" class="btn btn-primary" ng-if="checkStatus(!person.isSuspended)" ng-click="person.isSuspend=suspendUser(person.isSuspend)">{{suspendText}}</button>

Javascript:

$scope.checkStatus = function (bool) {
        if (bool) {
            $scope.suspendText = "UNSUSPEND"
            return true;
        } else {
            $scope.suspendText = "SUSPEND"
            return false;
        }
    }
    $scope.suspendUser = function (bool) {

        if (bool) {
            if ($window.confirm("Are You Sure Want to Unsuspend ?")) {
                $scope.suspendText = "SUSPEND"
                return !bool;
            }
            else {

                return bool;
            }
        } else {
            if ($window.confirm("Are You Sure Want to Suspend ?")) {
                $scope.suspendText = "UNSUSPEND"
                return !bool;
            } else {

                return bool;
            }
        }
    }

joseglego · Accepted Answer · 2016-06-05 16:01:00Z

2

Check this Plunkr: http://plnkr.co/edit/DEbTtpwu749sVT6iSojd?p=preview

Asumming you are through a User List with name & status (boolean true: Active - false: inactive):

user = {name:'John', status: true}

Here you can check how change the status, text & button color. In a short angular Way.

<li ng-repeat="user in users">
  ({{ user.active ? 'Active' : 'Inactive'}})
  {{ user.name }} 
  <div ng-class="user.active? 'btn btn-danger' : 'btn btn-primary' " ng-click="user.active=!user.active">
    {{ user.active ? 'Suspend' : 'Unsuspend'}}
  </div>
</li>

answered Jun 5, 2016 at 16:01

joseglego

2,1091 gold badge20 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mikko Viitala · Accepted Answer · 2016-06-05 15:50:39Z

0

<body ng-controller="MainCtrl as vm">
  <button class="btn"  
          ng-class="{ 'btn-primary': vm.isSuspended , 'btn-danger': !vm.isSuspended }"
          ng-bind="vm.text"
          ng-click="vm.toggleSuspend()">
  </button>
</body>

angular.module('app', [])
  .controller('MainCtrl', function() {
    var vm = this;

    vm.toggleSuspend = function() {
      vm.isSuspended = !vm.isSuspended;
      vm.text = vm.isSuspended ? 'unsuspend' : 'suspend';
    };

    vm.isSuspended = true;
    vm.toggleSuspend();
});

answered Jun 5, 2016 at 15:50

Mikko Viitala

8,3944 gold badges41 silver badges62 bronze badges

Comments

CozyAzure · Accepted Answer · 2016-06-05 15:57:06Z

0

You will just need one button instead of two. A better way of showing the colors would be using ng-class, where you can write expressions to toggle the class.

<button type="button" class="btn" ng-class="person.isSuspended? 'btn-danger':'btn-success'" ng-click="person.isSuspended = !person.isSuspended">{{suspendText}}</button>

Note the way ng-class is written. I am using ternary operator to check if person.isSuspeneded is true, if it is, apply the class btn-danger, else apply btn-success. Now you have got a way cleaner code.

Attached is the plnkr - http://plnkr.co/edit/Uk2rHFacMFLbXyxGzK1b?p=preview

answered Jun 5, 2016 at 15:57

CozyAzure

8,4987 gold badges39 silver badges56 bronze badges

Comments

pradeep1991singh · Accepted Answer · 2016-06-05 15:59:09Z

Try to replace your ng-if with ng-show in button.

<div ng-controller="MyCtrl">
 <button type="button" class="btn btn-danger" 
   ng-show="person.isSuspend" 
   ng-click="person.isSuspend=suspendUser(!person.isSuspend)">{{suspendText}}</button>
 <button type="button" class="btn btn-primary" 
   ng-show="!person.isSuspend" 
   ng-click="person.isSuspend=suspendUser(person.isSuspend)">{{suspendText}}</button> 
</div>

var myApp = angular.module('myApp',[]);

function MyCtrl($scope, $window) {

// first you need to initialize your scope if you didn't
$scope.person = {
    isSuspend: false
};
$scope.suspendText = "SUSPEND";
$scope.suspendUser = function (bool) {
    if (bool) {
        if ($window.confirm("Are You Sure Want to Unsuspend ?")) {
            $scope.suspendText = "SUSPEND"
            $scope.person.isSuspended = false;
        }
        else {
            $scope.person.isSuspended = true;
        }
    } else {
        if ($window.confirm("Are You Sure Want to Suspend ?")) {
            $scope.suspendText = "UNSUSPEND"
            $scope.person.isSuspended = true;
        } else {
            $scope.person.isSuspended = false;
        }
    }
}       

}

angular change button text

Collectives™ on Stack Overflow

AngularJs change button text as well as color

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related