AngularJS checkbox ng-model as an array

Question

My HTML is

    <label>
  <input type="checkbox" name="Communities" ng-model="formData.User.Communities" value="1" id="YOURROLE_0">
  COACH</label>
<br>
<label>
  <input type="checkbox" name="Communities" ng-model="formData.User.Communities" value="2" id="YOURROLE_1">
  ATHLETE</label>
<br>
<label>
  <input type="checkbox" name="Communities" ng-model="formData.User.Communities" value="3" id="YOURROLE_2">
  PARENT</label>

How can I specify the HTML/Javascript that I get the model as below. I need the checkboxes (checked ones) as an array populated to the array.

.controller('formController', function($scope) {

        $scope.formData = {
            "User": {
                "Communities": [1, 2, 3]
            }
        };

    });

user2727195 · Accepted Answer · 2014-09-25 23:09:29Z

2

Checklist Model is the answer

http://vitalets.github.io/checklist-model/

answered Sep 25, 2014 at 23:09

user2727195

7,35020 gold badges74 silver badges121 bronze badges

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

Comments

ggorlen · Accepted Answer · 2023-09-17 20:13:18Z

Here's an approach without a third-party library, similar to AngularJS: How to bind selected checkbox items to empty array:

angular.module("exampleApp", [])
  .controller("formController", function($scope) {
    $scope.communities = [
      {
        name: "COACH",
        value: 1,
        checked: false,
      },
      {
        name: "ATHLETE",
        value: 2,
        checked: false,
      },
      {
        name: "PARENT",
        value: 3,
        checked: false,
      },
    ];

    $scope.formData = {
      User: {
        Communities: []
      }
    };

    $scope.updateSelected = () => {
      $scope.formData.User.Communities = $scope.communities
        .filter(e => e.checked)
        .map(e => e.value);
    };
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.js"></script>
<div ng-app="exampleApp">
  <div ng-controller="formController">
    <div ng-repeat="community in communities">
      <label>
        <input
          type="checkbox"
          ng-model="community.checked"
          ng-change="updateSelected()"
          id="YOURROLE_{{$index}}"
        >
        {{community.name}}
      </label>
    </div>
    <div ng-repeat="selected in formData.User.Communities">
      {{selected}}
    </div>
  </div>
</div>

See also: How do I bind to list of checkbox values with AngularJS?

Collectives™ on Stack Overflow

AngularJS checkbox ng-model as an array

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related