AngularJS ensure checkbox value isset in a initial loaded form

Question

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.

Where is your form / submit action / controller? Please add a full example of what you got. Thanks. — lin
– lin, Commented Nov 23, 2017 at 6:47

marc_s · Accepted Answer · 2019-11-10 10:14:22Z

1

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

edited Nov 10, 2019 at 10:14

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Nov 23, 2017 at 7:07

lin

18.5k4 gold badges66 silver badges88 bronze badges

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

4 Comments

Denis Bhojvani Over a year ago

@in Thanks it works. Actually I tried ng-init but don't know at that time it not works. Thanks for you help. Accepted + 1

Denis Bhojvani Over a year ago

@in Can you please suggest me how to use select 2 in angular js I checked some where says use ui-select some where suggest used simple select 2 which is better.

lin Over a year ago

@DenisBhojvani please create a new question and post your code. Also link your new question here. I will help you inside your new question.

Denis Bhojvani Over a year ago

@In this question regarding full calendar can you please check this stackoverflow.com/questions/47458527/…

Collectives™ on Stack Overflow

AngularJS ensure checkbox value isset in a initial loaded form

View

AnguarJS

1 Answer 1

View

AngularJS application

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

View

AnguarJS

1 Answer 1

View

AngularJS application

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related