set checkbox to default in button click in AngularJS

Question

I am using AngularJs, in which I have a checkbox collection, and have set one of items as selected. The index.cshtml has the below code:

  <div ng-controller="testController" ng-init="init()">
    <form name="mainForm" id="createForm" ng-submit="mainForm.$valid && add()" novalidate="">
      <div class="container" ng-show="createMenu">
        <div class="row">
          <div class="col-lg-2 col-md-2 col-sm-2 ">
            <label>Delivery Method</label>
          </div>
          <div class="col-lg-2 col-md-2 col-sm-2" ng-repeat="method in deliveryMethods">
            <input type="checkbox" id="{{method.id}}" value="{{method.value}}" name="deliveryMethod[]" ng-model="method.selected" ng-click="toggleSelection(method.value)" ng-required="!someSelected"> {{method.value}}

          </div>

        </div>
        <span style="color:red" ng-show="submitted == true &&  !someSelected">Delivery is required</span>

        <input type="button" id="btnReset" value="Cancel" ng-click="reset()" />
      </div>
    </form>
  </div>

The checkbox data is filled as below in the controller.js:

$scope.deliveryMethods = [{
  "id": 1,
  "value": "test-up",
  selected: true,
}, {
  "id": 2,
  "value": "test two",
  selected: false
}, {
  "id": 3,
  "value": "test three",
  selected: false
}];

Here "test-up" is selected by default. If i select option "test two" and then click on cancel, i want to set the checkbox "test-up" as selected. I have tried the below code, but is not working:

$scope.clear = function() {
  $scope.deliverySelection = ["test-up"];
  $scope.submitted = false;
  $scope.clearAll();
}

$scope.reset = function() {
  $scope.clear();
}
$scope.toggleSelection = function toggleSelection(deliveryMethods) {
  var idx = $scope.deliverySelection.indexOf(deliveryMethods);
  // is currently selected
  if (idx > -1) {
    $scope.deliverySelection.splice(idx, 1);
  } else {
    $scope.deliverySelection.push(deliveryMethods);
  }
  someSelected();
};
$scope.someSelected = true;

function someSelected() {
  $scope.someSelected = false;
  for (var i = 0; i < $scope.deliveryMethods.length; i++) {
    if ($scope.deliveryMethods[i].selected == true) {
      $scope.someSelected = true;
      return false;
    }
  }
}


$scope.clearAll = function() {
  angular.forEach($scope.deliveryMethods, function(checkbox_id) {
    if (checkbox_id.id != 1)
      checkbox_id.selected = false;
  });

}

How to set the checkbox "test-up" as checked, when clicking on cancel button? Thanks

CozyAzure · Accepted Answer · 2017-01-11 09:13:13Z

1

try this instead of your clear all function

$scope.clearAll = function() {
  angular.forEach($scope.deliveryMethods, function(checkbox_id) {
    checkbox_id.selected = false;
    if (checkbox_id.id == 1) {
      checkbox_id.selected = true;
    }
  });
}

edited Jan 11, 2017 at 9:13

CozyAzure

8,4987 gold badges39 silver badges56 bronze badges

answered Jan 11, 2017 at 9:09

Ramesh Rajendran

38.9k49 gold badges159 silver badges241 bronze badges

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

Collectives™ on Stack Overflow

set checkbox to default in button click in AngularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related