admin管理员组

文章数量:1323524

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

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;
                }
            }
Share Improve this question edited Jun 22, 2018 at 16:37 georgeawg 49k13 gold badges77 silver badges98 bronze badges asked Feb 4, 2016 at 13:30 forgottoflyforgottofly 2,72912 gold badges54 silver badges96 bronze badges
Add a ment  | 

7 Answers 7

Reset to default 2

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.

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

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

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

                }



    });

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>

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!

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

本文标签: javascriptSetting validation for button if atleast one check box is selected in ngrepeatStack Overflow