Disable button with checkbox in nested ng-repeat angularjs

Question

I wanna disable the button with the checkbox in nested angularjs ng-repeat. I mean to Disable button in the current array of ng-repeat. My code looks like the below example,

angular.module('test', [])

.controller('myController', ['$scope', function($scope) {
    $scope.hasSelectedAnItem = false;
  $scope.mainItems = [
    { dropdownlist: [
      {OptionValue: 123, OptionName: "Adam", IsSelected: true},
      {OptionValue: 234, OptionName: "Paul", IsSelected: false},
      {OptionValue: 345, OptionName: "Jason", IsSelected: true},
      {OptionValue: 464, OptionName: "Joe", IsSelected: false}
    ]},
    { dropdownlist: [
      {OptionValue: 923, OptionName: "Adam2", IsSelected: true},
      {OptionValue: 934, OptionName: "Paul2", IsSelected: false},
      {OptionValue: 945, OptionName: "Jason2", IsSelected: true},
      {OptionValue: 964, OptionName: "Joe2", IsSelected: false}
    ]}
    ];
   
   $scope.canBeSaved = function(item) {
        alert(item);
      var found = false;
        $scope.mainItems.forEach(function(item) {
        if (item.IsSelected) {
            found = true; 
        }
      });
      $scope.hasSelectedAnItem = found;
   }
   
   $scope.save = function() {
        alert($scope.cat.IsSelected);
   }
   
   $scope.canBeSaved();
}]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.1/angular.min.js"></script>


<div ng-app="test" ng-controller="myController">
  <div ng-repeat="items in mainItems">
    <button ng-click="save()" ng-disabled="!hasSelectedAnItem" class="btn btn-sm btn-block btn-primary">
      Save
    </button>
    <ul class="categories-list">
        <li ng-repeat="cat in items.dropdownlist">
            <label><input type="checkbox" id="cat-{{cat.OptionValue}}" ng-model="cat.IsSelected" ng-change="canBeSaved(cat.OptionValue)"/> {{cat.OptionName}}</label>
        </li>
    </ul>
  </div>
</div>

Need your help. Working example with code https://jsfiddle.net/malikzahid321/nc63hz90/24/ Thank you

$scope.mainItems in not even an array, but an object. You should ng-repeat over array. — AvgustinTomsic
– AvgustinTomsic, Commented Dec 17, 2021 at 14:31
Please have a look now, $scope.mainItems converted to an array. — Malik Zahid
– Malik Zahid, Commented Dec 20, 2021 at 6:50

Kinglish · Accepted Answer · 2021-12-20 18:02:48Z

1

Easiest just to use ng-model (which you are) which updates the data array everytime you check/uncheck. Then you can put a function in your ng-disabled, pass along the items collection and test for a any 'true' values with Array#some. No need for the ng-check function you had.

...  ng-disabled="checkList(items)" ...

and in your controller

$scope.checkList = function(items) {
      return !items.some(a => a.IsSelected)
  }

angular.module('test', [])

.controller('myController', ['$scope', function($scope) {
    $scope.hasSelectedAnItem = false;
  $scope.mainItems = {
    itemss: [
      {OptionValue: 123, OptionName: "Adam", IsSelected: true},
      {OptionValue: 234, OptionName: "Paul", IsSelected: false},
      {OptionValue: 345, OptionName: "Jason", IsSelected: true},
      {OptionValue: 464, OptionName: "Joe", IsSelected: false}
    ],
    items: [
      {OptionValue: 923, OptionName: "Adam2", IsSelected: true},
      {OptionValue: 934, OptionName: "Paul2", IsSelected: false},
      {OptionValue: 945, OptionName: "Jason2", IsSelected: true},
      {OptionValue: 964, OptionName: "Joe2", IsSelected: false}
    ]
  };
  
  $scope.checkList = function(items) {
      return !items.some(a => a.IsSelected)
  }
   
  $scope.save = function() {
        alert($scope.cat.IsSelected);
   }
   
}]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.1/angular.min.js"></script>


<div ng-app="test" ng-controller="myController">
  <div ng-repeat="items in mainItems">
    <button ng-click="save()" ng-disabled="checkList(items)" class="btn btn-sm btn-block btn-primary">
      Save
    </button>
    <ul class="categories-list">
      <li ng-repeat="cat in items">
        <label><input type="checkbox" id="cat-{{cat.OptionValue}}" ng-model="cat.IsSelected"/> {{cat.OptionName}}</label>
      </li>
    </ul>
  </div>
</div>

edited Dec 20, 2021 at 18:02

answered Dec 17, 2021 at 22:58

Kinglish

23.7k4 gold badges25 silver badges43 bronze badges

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

2 Comments

Malik Zahid Over a year ago

Something went wrong in your code.

Kinglish Over a year ago

@MalikZahid - ooops. Thanks. I fixed that.

Collectives™ on Stack Overflow

Disable button with checkbox in nested ng-repeat angularjs

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related