AngularJs disable button when all variable in object are false

Question

I have a list of buttons that can be clicked. When no buttons are selected, I want to disable a button somewhere else.

Here is the button, the class is added from this code -

<button type="button" ng-repeat="service in services_data track by service.id" ng-class="showDetails[service.id] ? 'bg-success': 'bg-default'" ng-init="selected[service.id] = false" ng-click="showDetails[service.id] = showDetails[service.id]; select_check(showDetails)" class="list-group-item item_buttons">
  <ul class="list-unstyled">
     <li>{{service.name}} - {{service.est_time_mins}} mins. | ${{service.price}}</li>
     <li>{{service.style}}</li>
  </ul>
</button>

When a button is clicked, it triggers a toggle variable "showDetails"...this returns TRUE when a button is selected and FALSE if it is deselected.

So when all the buttons are in the FALSEy state, I want a button disabled.

So, I can I write a function that checks the showDetails variable for each button?

Tried a bunch of stuff with loops, looping over each button and some if/elses but I could not get anything working correctly even close really.

felipecamposclarke · Accepted Answer · 2016-05-02 14:32:08Z

1

I have written a code that help you:

http://jsfiddle.net/k3bzcadx/2/

HTML:

<div ng-controller="MyCtrl">
<button type="button" ng-repeat="service in servicesData" ng-class="{'bg-success': service.selected, 'bg-default': !service.selected}" ng-click="service.selected = !service.selected" class="list-group-item item_buttons">
  <ul class="list-unstyled">
     <li>{{service.name}} - {{service.est_time_mins}} mins. | ${{service.price}}</li>
     <li>{{service.style}}</li>
  </ul>
</button>

<br>
<button class="another-button" ng-disabled="disableAnotherButton">ANOTHER BUTTON!</button>

JS:

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

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {

        $scope.disableAnotherButton = false;

    $scope.servicesData = [
        {
        id: 1,
        name: 'Button A',
        price: 1000,
            selected: false
        },{
        id: 2,
        name: 'Button B',
        price: 2000,
            selected: false
        }
   ];

   $scope.$watch('servicesData', function(newServicesData){
      $scope.disableAnotherButton = newServicesData.every(elem => elem.selected == true); 
   }, true);

}

(UPDATE)

also you can handle the logic in a separate array

http://jsfiddle.net/k3bzcadx/3/

(UPDATE 2)

Without the ECMAScript 2015 syntax

http://jsfiddle.net/k3bzcadx/5/

edited May 2, 2016 at 14:32

answered Apr 30, 2016 at 16:42

felipecamposclarke

9248 silver badges14 bronze badges

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

8 Comments

Sean Anderson Over a year ago

Thank you, this looks close, but looks like when you click (select) a button, and then you click again, it does not deselect the button.

felipecamposclarke Over a year ago

you only have to change the ng-click. ng-click="service.selected = !service.selected". In response I have edited the code.

felipecamposclarke Over a year ago

@SeanAnderson try the jsfiddle again

Sean Anderson Over a year ago

Thank you. This works very well. The only thing need to figure out, I am pulling a set of data from a database that will not include the selected property, and I cannot add it to the db. So, I am trying to change servicesData.selected to just watching a $scope.selected variable that I include in my ng-repeat. Does that make sense? I should be able to figure that out though messing with it a bit.

felipecamposclarke Over a year ago

Anytime @SeanAnderson, you can isolate the logic in a separate array (update original response): jsfiddle.net/k3bzcadx/3

|

Ikechi Michael · Accepted Answer · 2016-04-30 17:05:00Z

0

Try this ... Place the following function in your script. It'll extend the JavaScript Array Prototype

Array.prototype.all = function (fn) {
   var b = true;
   var arr = this;
   fn = fn || function (i) {return true};
   arr.forEach(function (item) {
       if (fn(item) == false) b = false;
   });
   return b;
}

Next, place this as the button you wish to disable based on the condition

<button class="other-button" ng-disabled="services_data.all((service) => showDetails[service.id])">OTHER BUTTON</button>
<!--If your browser supports ECMA SCRIPT 6, i guess

Or to be safe ...

<button class="other-button" ng-disabled="services_data.all(function (service) { return showDetails[service.id] })">OTHER BUTTON</button>
<!--If your browser does NOT support ECMA SCRIPT 6

answered Apr 30, 2016 at 17:05

Ikechi Michael

4893 silver badges6 bronze badges

1 Comment

Sean Anderson Over a year ago

Both of those ng-disabled code causes a parse/syntax error. I tried including the script inside of angular and outside. Does not seem to work. I appreciate it though.

Collectives™ on Stack Overflow

AngularJs disable button when all variable in object are false

2 Answers 2

8 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related