How to disable a button in AngularJS when all variables in an object are set to false

Question

How to disable a button in AngularJS when all variables in an object are set to false

I need to implement a feature where only one button can be selected at a time from a list of buttons. When no button is selected, I want to disable another button elsewhere on the page.

Below is the code snippet for the buttons:

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

A click on any button toggles the "showDetails" variable, setting it to TRUE if the button is selected and FALSE if deselected.

I am trying to write a function that checks the status of all buttons to determine when to disable a specific button. However, my attempts with loops and conditional statements have not been successful so far.

javascript angularjs

Answer 1

Answer №1

Here is a code snippet that I wrote to assist you:

Link to the code

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)

You can also manage the logic in a separate array.

Updated link for the code

(UPDATE 2)

This version does not use ECMAScript 2015 syntax.

Alternative version of the code

Answer 2

Here is a code snippet that I wrote to assist you:

Link to the code

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)

You can also manage the logic in a separate array.

Updated link for the code

(UPDATE 2)

This version does not use ECMAScript 2015 syntax.

Alternative version of the code

Answer 3

Answer №2

Give this a try ... Insert the following function into your script. It will expand the capabilities of 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;
}

Then, use this code to disable a specific button depending 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 suppose

Alternatively...

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

Answer 4

Give this a try ... Insert the following function into your script. It will expand the capabilities of 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;
}

Then, use this code to disable a specific button depending 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 suppose

Alternatively...

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

How to disable a button in AngularJS when all variables in an object are set to false

Answer №1

Answer №2

Similar questions

Unable to fulfill all the promises in JavaScript

What is the process for submitting and storing a collection of files in a database as a list?

get data from a JSON array with no specific name on the provided URL

Why is Jquery's .addClass and .removeClass not functioning as expected?

Issue at hand: Unexpected error 500 encountered while sending AJAX request to PHP script through

"Can you send multiple variables using an Ajax post by using a loop

What is the correct way to employ async/await in combination with Array.filter within a React application?

Contrast objects and incorporate elements that are different

The use of refs on Function components in SVG is not supported. Any attempts to access the ref will result in an

Exploring the process of implementing a dynamic background image feature in Vue

Pulling a div from beneath numerous other divs

Unable to process despite clicking button (no error messages)

disable input box stationary

Guide on changing templates based on parameters in $stateParams using ui-router

Utilizing commands in conjunction with phonegap

The GetJSON function is designed to fetch the entire array of data, without selectively retrieving specific

Warning: Neglecting to handle promise rejections is now considered outdated and discouraged

The data received by request.responseText is accurate, however JavaScript is unable to interpret it

how to set a boolean value to true in a vue @click event?

What is causing this error/bug to show up in Angular?