CODEWITHSUNDEEP
javascripthtmlangularjs
Denis Bhojvani
Denis Bhojvani

Reputation: 794

AngularJS ensure checkbox value isset in a initial loaded form

I've created one form there are multiple checkbox at edit time that form checkbox is coming with checked using below code.

View

<form method="POST" name="LeadCircle" role="form" ng-submit="addLeadCircle()">
  <input type="hidden" ng-model="form.addleadcircle.leadId" name="leadId" />
  <div class="select-basket">
    <div class="checkbox" ng-repeat="circle in circles">
      <input class="checkboxCircle" type="checkbox" ng-checked="{{circle.checked}}" name="leadcircle[]" ng-model="form.addleadcircle.leadcircle[circle.Id]" value="{{circle.Id}}" id="cb-{{circle.Id}}">
      <label for="cb-{{circle.Id}}">{{circle.Name}}</label>
    </div>
  </div>
  <button type="submit" class="btn btn-outline-secondary button-sm text-uppercase pull-right">Add</button>
</form>

AnguarJS

$scope.addLeadCircle = function () {
     console.log($scope.form.addleadcircle);
     return false; 
     dataFactory.httpRequest(base_url + 'leadCircles/addLeadCircle', 'POST', {}, $scope.form.addleadcircle).then(function (data) {
         alertify.notify('Assign circle successfully', 'success', 5, function () {});
         return;
     });
}

This code also shows checked checkbox which value need to check. but what happen if I'm try to submit form it will not gives value of this already checked checkbox If I'm going to select new checkbox it will gives value of that newly checked checkbox.

Now in console at edit form If I will submit form directly without checked any checkbox so It will take only hidden input value not already selected checkbox value. If I am select new checkbox then it takes only newly selected checkbox value.

Any one can please help on this Thanks in advance.

Upvotes: 1

Views: 197

Answers (1)

lin
lin

Reputation: 18392

You have a couple of problems in your code. First, ng-checked expects an object and not an string. You should change it to ng-checked="circle.checked". You also need no value attribute because ng-model holds you input value. Instead of using ng-checked I would prefer to use ng-init to create a default value on your ng-model. In that way you will always have a param set for each checkbox on submit. It also makes ng-checked obsolete because ng-model handles the "check" status.

View

<div ng-controller="MyCtrl">
  <form ng-submit="submit()">
    <div ng-repeat="item in data">
      <input class="checkboxCircle" 
      type="checkbox" 
      name="leadcircle[]" 
      ng-model="form.addleadcircle.leadcircle[item.id]" 
      ng-init="form.addleadcircle.leadcircle[item.id] = item.value" // <- ensure init value
      id="cb-{{item.id}}"> {{item.id}}
    </div>
    <button type="submit">
      Send
    </button>
  </form>
</div>

AngularJS application

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

myApp.controller('MyCtrl', function($scope) {

  $scope.form = {
    addleadcircle: {
      leadcircle: []
    }
  }

  $scope.data = [{
    id: 1,
    value: true
  }, {
    id: 2,
    value: false
  }, {
    id: 3,
    value: false
  }, {
    id: 4,
    value: true
  }, {
    id: 5,
    value: false
  }, {
    id: 6,
    value: true
  }, {
    id: 7,
    value: true
  }, {
    id: 8,
    value: false
  }];

  $scope.submit = function () {
    console.log($scope.form);
  }
});

>> Demo fiddle

Upvotes: 1

Related Questions