Enable the Button when any checkbox checked in the loop, Out Side Button

Question

Enable the Button only when any checkbox checked in the loop, the button is out side the loop

HTML

<body ng-controller="MainCtrl">
  <div ng-repeat="$item in items">
    <label>
      Amount: <input type="number" ng-model="$item.amount">
    </label>
    <label>
      Check: <input type=checkbox ng-model="$item.checked">
    </label>
  </div>

  <button type="button" ng-click="checkNow()">Check now</button>

Script :

    function checkNow() {
      $scope.total = $scope.items.filter(function(value) {
        return value.checked;
      }).reduce(function(a, b) {
        return a + b.amount;
      }, 0);
    }

Suneet Bansal · Accepted Answer · 2016-08-11 10:25:09Z

2

try below code:

Html
----

    <body ng-app="main">
      <div  ng-controller="mainCntrl">
       <div ng-repeat="$item in items">
          <label>
           Amount: <input type="number" ng-model="$item.amount">
          </label>
          <label>
           Check: <input type=checkbox ng-model="$item.checked">
          </label>
       </div>
       <button type="button" ng-disabled="disableBtn"  ng-click="checkNow()">Check now</button>

    </div>

    </body>


Controller
----------

angular.module('main', [])
.controller('mainCntrl', function($scope, $timeout) {
  $scope.disableBtn = true;

  $scope.items = [{amount: 1200, checked: false},
                  {amount: 1500, checked: false},
                  {amount: 1600, checked: false}];

  var isChecked = false;
  $scope.$watch('items', function(newVal) {
     angular.forEach(newVal, function(val) {
         if(val.checked) {
            isChecked = true;
         }
     });
     $scope.disableBtn = !isChecked;
     isChecked = false;
  }, true);

});

It should resolved your issues.

Cheers!

answered Aug 11, 2016 at 10:25

Suneet Bansal

2,7061 gold badge16 silver badges18 bronze badges

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

3 Comments

Snopzer Over a year ago

Can we write one or more $scope.$watch function in single controller.?

Suneet Bansal Over a year ago

yes but try to avoid as much as possible since it will decrease the performance.

Snopzer Over a year ago

i Like the Logic, but u have implemented in ngClick. Thank you.

Collectives™ on Stack Overflow

Enable the Button when any checkbox checked in the loop, Out Side Button

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related