CODEWITHSUNDEEP
javascriptangularjsvalidationangularjs-ng-disabled
forgottofly
forgottofly

Reputation: 2719

Setting validation for button if atleast one check box is selected in ng-repeat

I'm facing a problem in which if I need to enable the save button if at least one check box is selected which is inside ng-repeat. When I click for the first time it works well but dosen't work for multiple check box clicks.

Below is the working plunker:

Disabling save button

I'm using ng-change to get the selected condition..

 $scope.getSelectedState = () => {
                var selectedCount = new Array();

                for (var i in $scope.selected) {
                    selectedCount.push($scope.selected[i]);
                }
                var allTrue = selectedCount.every(function (k) { return k });
                if (allTrue) {
                    $scope.isSelected = false;
                } else {
                    $scope.isSelected = true;
                }
            }

Upvotes: 1

Views: 1614

Answers (7)

Amay Kulkarni
Amay Kulkarni

Reputation: 838

call on ng- change function, (checkbox is in ng-repeat):

<input type="checkbox" name="selected" ng-model="library.isSelected" ng-change="auditCtrl.showButton()"/>

<button class="btn btn-primary" type="button" ng-click="auditCtrl.sendApproval()" ng-disabled="!auditCtrl.showSend">Send</button>

.js

auditCtrl.showButton = function()
{   
    var arrayCheck = [];
    for(var k = 0; k < auditCtrl.libraries.length; k++)
    {
        if(auditCtrl.libraries[k].isSelected == true)
        {
             arrayCheck.push(auditCtrl.libraries[k]);
        }
    }
    if(arrayCheck.length > 0)
    {
        auditCtrl.showSend = true;
    }
    else
    {
        auditCtrl.showSend = false;
    }
}

Upvotes: 0

Zonedark
Zonedark

Reputation: 249

I'm a bit late to the question and I saw everyone already gave you a lot of great tips.

I found something different you may like, that does not involve any controller (Javascript) code.

Here is the HTML for the checkbox :

<label class="checkbox" >
                    <input type="checkbox" class="form-control"
                           ng-model="selected[item.id]" ng-init="state = -1" ng-click="state = state * -1;$parent.validFields = $parent.validFields + state;" /><i></i>
                </label>

And for the button :

 <button type="button" ng-disabled="validFields <= 0" ng-click="save()">Save</button>

Basically the general idea is this one : you have a "validFields" counter that starts at 0 (= no field is activated). The button is displayed if this value is above 0.

Every checkbox has a "state", that is either 1 or -1. Everytime you click on a checkbox, it adds its state to the counter, indicating whether it is ON or OFF, and switches its states. The next time you click you "cancel" the previous value that was added to the validation.

Working Plunker link here : PLUNKER DEMO

Happy coding!

Upvotes: 2

Shaishab Roy
Shaishab Roy

Reputation: 16805

just change your getSelectedState . see PLUNKER DEMO

like:

 $scope.getSelectedState = function() {
     $scope.isSelected = true;
     angular.forEach($scope.selected, function(key, val) {   
     if(key) {
       $scope.isSelected = false;
     }
   });
 };

and you should use ng-repeat in <tr> tag instead of <body> tag according to your plunker demo.

Upvotes: 2

Asish Bhattarai
Asish Bhattarai

Reputation: 502

Do this:

$scope.isSelected = false;
        $scope.getSelectedState = () => {
            var atleastOneSelected = false;
            for (var i in $scope.selected) {
              atleastOneSelected = atleastOneSelected || $scope.selected[i];
            }
            $scope.isSelected = atleastOneSelected;
        }

And have following in html part: 

<button type="button" ng-disabled="!isSelected" ng-click="save()">Save</button>

Upvotes: 2

Amit Ramoliya
Amit Ramoliya

Reputation: 392

Here is your updated app.js:

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

    app.controller('MainCtrl', function($scope) {
      $scope.name = 'World';
             $scope.selected = {};

                $scope.outputType = [
                    {
                        "id": 1,
                        "name": "Coal"
                    },
                    {
                        "id": 2,
                        "name": "Rom"
                    },
                    {
                        "id": 3,
                        "name": "Waste"
                    }
                ];
                $scope.months = ["JAN", "FEB"];
                $scope.values = [];

                $scope.isSelected = true;

                $scope.getSelectedState = (id) => {
                     var selectedCount = 0;

                    for(var key in $scope.selected){
                        if($scope.selected[key]){
                          selectedCount++;
                        }

                    }

                    if(selectedCount!=0){
                       $scope.isSelected = false;
                    }else{
                       $scope.isSelected = true;
                    }

                }



    });

Upvotes: 2

van
van

Reputation: 643

Here is my suggestion. Whenever there is any checked item, it will make variable "isAnyTrue = true". 

 $scope.getSelectedState = () => {
                var selectedCount = new Array();
               
         
                var isAnyTrue  = false;
                for (var i in $scope.selected) {
                    if ($scope.selected[i] === true){
                     isAnyTrue = true;
                    }
                    selectedCount.push($scope.selected[i]);
                }
                var allTrue = selectedCount.every(function (k) { return k });
                 $scope.isSelected = !isAnyTrue;
                
            }

Upvotes: 2

Hristo Enev
Hristo Enev

Reputation: 2541

How about this:

$scope.getSelectedState = () => {
    var selectedCount = new Array();

    for (var i in $scope.selected) {
        selectedCount.push($scope.selected[i]);
    }

    $scope.isSelected = selectedCount.indexOf(true) !== -1 ? false : true;
}

You fill the array with the checkbox values and then check if that array contains true value with indexOf

Upvotes: 2

Related Questions