1

How to select two or more checkbox based on the value in angularjs?

Plunker reference

  • In plunker there are four checkbox inputs each of one values is different but ng-model is same for four inputs, so if I checked Moral Ethics checkbox this value is need to be save in api.

  • What I exactly looking is, as now if I clicked any of one checkbox in plunker all the checkbox is checked bcoz of the same ng-model. actually we have mentioned ng-model as array in backend, so if click any of two checkbox that checked values only to be save in backend...

For Example: in plunker I want to click Moral Ethics checkbox and Social network these two values only need to checked and it should saved as a array json data in backend.

This jsbin link is exactly what we want. We have tried many ways but unable to find the solution. So please check and update my plunker as well to know the exact solution.

function MyCntrl($scope) {
  $scope.questions = [{
      "_id": "5863d3aaacaeddc00663bc07",
      "user": {
        "_id": "58072aba0f82a61823c434df",
        "displayName": "Table 1",
        "dob": "2016-12-22T18:30:00.000Z",
        "location": "chennai",
        "religion": "hindu",
        "roles": [
          "admin"
        ],
        "profileImageURL": "./modules/users/client/img/profile/uploads/ac4fbab396c2f725ed5211524f171136"
      },

      "friend_tag": [],
      "emotion": "Confused",
      "category": "Religion & Culture",
      "content": "mani",
      "title": "Who Is the best Player?",
      "created": "2016-12-28T15:00:58.777Z"
    },

    {
      "_id": "5863d3aaacaeddc00663bc07",
      "user": {
        "_id": "58072aba0f82a61823c434df",
        "displayName": "Table 1",
        "dob": "2016-12-22T18:30:00.000Z",
        "location": "chennai",
        "religion": "hindu",
        "roles": [
          "admin"
        ],
        "profileImageURL": "./modules/users/client/img/profile/uploads/ac4fbab396c2f725ed5211524f171136"
      },

      "friend_tag": [],
      "emotion": "Confused",
      "category": "Moral Ethics",
      "content": "mani",
      "title": "Who Is the best Player?",
      "created": "2016-12-28T15:00:58.777Z"
    },
    {
      "_id": "5863d3aaacaeddc00663bc07",
      "user": {
        "_id": "58072aba0f82a61823c434df",
        "displayName": "Table 1",
        "dob": "2016-12-22T18:30:00.000Z",
        "location": "chennai",
        "religion": "hindu",
        "roles": [
          "admin"
        ],
        "profileImageURL": "./modules/users/client/img/profile/uploads/ac4fbab396c2f725ed5211524f171136"
      },

      "friend_tag": [],
      "emotion": "Confused",
      "category": "Environment & Health",
      "content": "mani",
      "title": "Who Is the best Player?",
      "created": "2016-12-28T15:00:58.777Z"
    },
    {
      "_id": "5863d3aaacaeddc00663bc07",
      "user": {
        "_id": "58072aba0f82a61823c434df",
        "displayName": "Table 1",
        "dob": "2016-12-22T18:30:00.000Z",
        "location": "chennai",
        "religion": "hindu",
        "roles": [
          "admin"
        ],
        "profileImageURL": "./modules/users/client/img/profile/uploads/ac4fbab396c2f725ed5211524f171136"
      },

      "friend_tag": [],
      "emotion": "Confused",
      "category": "Environment & Health",
      "content": "mani",
      "title": "Who Is the best Player?",
      "created": "2016-12-28T15:00:58.777Z"
    },
    {
      "_id": "5863d3aaacaeddc00663bc07",
      "user": {
        "_id": "58072aba0f82a61823c434df",
        "displayName": "Table 1",
        "dob": "2016-12-22T18:30:00.000Z",
        "location": "chennai",
        "religion": "hindu",
        "roles": [
          "admin"
        ],
        "profileImageURL": "./modules/users/client/img/profile/uploads/ac4fbab396c2f725ed5211524f171136"
      },

      "friend_tag": [],
      "emotion": "Confused",
      "category": "Religion & Culture",
      "content": "mani",
      "title": "Who Is the best Player?",
      "created": "2016-12-28T15:00:58.777Z"
    },
    {
      "_id": "5863d3aaacaeddc00663bc07",
      "user": {
        "_id": "58072aba0f82a61823c434df",
        "displayName": "Table 1",
        "dob": "2016-12-22T18:30:00.000Z",
        "location": "chennai",
        "religion": "hindu",
        "roles": [
          "admin"
        ],
        "profileImageURL": "./modules/users/client/img/profile/uploads/ac4fbab396c2f725ed5211524f171136"
      },

      "friend_tag": [],
      "emotion": "Confused",
      "category": "Religion & Culture",
      "content": "mani",
      "title": "Who Is the best Player?",
      "created": "2016-12-28T15:00:58.777Z"
    },
    {
      "_id": "5863d3aaacaeddc00663bc07",
      "user": {
        "_id": "58072aba0f82a61823c434df",
        "displayName": "Table 1",
        "dob": "2016-12-22T18:30:00.000Z",
        "location": "chennai",
        "religion": "hindu",
        "roles": [
          "admin"
        ],
        "profileImageURL": "./modules/users/client/img/profile/uploads/ac4fbab396c2f725ed5211524f171136"
      },

      "friend_tag": [],
      "emotion": "Confused",
      "category": "Moral Ethics",
      "content": "mani",
      "title": "Who Is the best Player?",
      "created": "2016-12-28T15:00:58.777Z"
    }
  ]
}
<!doctype html>
<html ng-app>

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
  <script src="script.js"></script>
</head>

<body>
  <form ng-controller="MyCntrl">
    <div class="col-md-3">
      <label><input type="checkbox" name="Moral Ethics" data-ng-model="category" value="Moral Ethics" ><span>Moral Ethics</span></label></div>

    <div class="col-md-3">
      <label class="green"><input type="checkbox" name="culture" data-ng-model="category" value="culture" ><span>Religion & Culture</span></label></div>


    <div class="col-md-3">
      <label class="green"><input type="checkbox" name="Social network" data-ng-model="category" value="Social network" ><span>Social network</span></label></div>


    <div class="col-md-3">
      <label class="green"><input type="checkbox" name="Environment logic" data-ng-model="category" value="Environment logic" ><span>Environment logic</span></label></div>
  </form>
</body>

</html>
Cyril Gandon
  • 16,830
  • 14
  • 78
  • 122
R. Mani Selvam
  • 320
  • 8
  • 36
  • The answer you quoted http://stackoverflow.com/questions/14514461/how-do-i-bind-to-list-of-checkbox-values-with-angularjs is a nice solution, why don't you do the same? – Cyril Gandon Mar 08 '17 at 10:46
  • @cyril Gandon I am looking to do this in `form` but they are used `ng-repeat="fruitName in fruits"` and all, i am little bit confused on that solution, so can you please update my plunker as well to know the solution please.... – R. Mani Selvam Mar 08 '17 at 10:53
  • When you have api ? Is there any reason to hardcode the checkboxes ? – GURURAJ DHARANI Mar 08 '17 at 12:16
  • @gururaj in my portal while user is signing up, they need to fill the all details in a form ... then the user must to need to select two categories while they filling up the details so that only i have used the checkbox ... i have given the plunker on above so please look that and help me..thanks.... – R. Mani Selvam Mar 08 '17 at 12:30

1 Answers1

1

Here's the code snippet that behaves like you want. It actually keeps a seperate array of selected items and maintains it every time you check/uncheck something. 

function MyCntrl($scope) {
   $scope.toggleSelection = function toggleSelection(item) {
    var idx = $scope.selection.indexOf(item);

    // is currently selected
    if (idx > -1) {
      $scope.selection.splice(idx, 1);
    }
  
    // is newly selected
    else {
      $scope.selection.push(item);
    }
  };

  $scope.selection = [];

  $scope.items = ["Moral Ethics", "Religion & Culture", "Social network", "Environment logic"];
  $scope.questions = [{
      "_id": "5863d3aaacaeddc00663bc07",
      "user": {
        "_id": "58072aba0f82a61823c434df",
        "displayName": "Table 1",
        "dob": "2016-12-22T18:30:00.000Z",
        "location": "chennai",
        "religion": "hindu",
        "roles": [
          "admin"
        ],
        "profileImageURL": "./modules/users/client/img/profile/uploads/ac4fbab396c2f725ed5211524f171136"
      },

      "friend_tag": [],
      "emotion": "Confused",
      "category": "Religion & Culture",
      "content": "mani",
      "title": "Who Is the best Player?",
      "created": "2016-12-28T15:00:58.777Z"
    },

    {
      "_id": "5863d3aaacaeddc00663bc07",
      "user": {
        "_id": "58072aba0f82a61823c434df",
        "displayName": "Table 1",
        "dob": "2016-12-22T18:30:00.000Z",
        "location": "chennai",
        "religion": "hindu",
        "roles": [
          "admin"
        ],
        "profileImageURL": "./modules/users/client/img/profile/uploads/ac4fbab396c2f725ed5211524f171136"
      },

      "friend_tag": [],
      "emotion": "Confused",
      "category": "Moral Ethics",
      "content": "mani",
      "title": "Who Is the best Player?",
      "created": "2016-12-28T15:00:58.777Z"
    },
    {
      "_id": "5863d3aaacaeddc00663bc07",
      "user": {
        "_id": "58072aba0f82a61823c434df",
        "displayName": "Table 1",
        "dob": "2016-12-22T18:30:00.000Z",
        "location": "chennai",
        "religion": "hindu",
        "roles": [
          "admin"
        ],
        "profileImageURL": "./modules/users/client/img/profile/uploads/ac4fbab396c2f725ed5211524f171136"
      },

      "friend_tag": [],
      "emotion": "Confused",
      "category": "Environment & Health",
      "content": "mani",
      "title": "Who Is the best Player?",
      "created": "2016-12-28T15:00:58.777Z"
    },
    {
      "_id": "5863d3aaacaeddc00663bc07",
      "user": {
        "_id": "58072aba0f82a61823c434df",
        "displayName": "Table 1",
        "dob": "2016-12-22T18:30:00.000Z",
        "location": "chennai",
        "religion": "hindu",
        "roles": [
          "admin"
        ],
        "profileImageURL": "./modules/users/client/img/profile/uploads/ac4fbab396c2f725ed5211524f171136"
      },

      "friend_tag": [],
      "emotion": "Confused",
      "category": "Environment & Health",
      "content": "mani",
      "title": "Who Is the best Player?",
      "created": "2016-12-28T15:00:58.777Z"
    },
    {
      "_id": "5863d3aaacaeddc00663bc07",
      "user": {
        "_id": "58072aba0f82a61823c434df",
        "displayName": "Table 1",
        "dob": "2016-12-22T18:30:00.000Z",
        "location": "chennai",
        "religion": "hindu",
        "roles": [
          "admin"
        ],
        "profileImageURL": "./modules/users/client/img/profile/uploads/ac4fbab396c2f725ed5211524f171136"
      },

      "friend_tag": [],
      "emotion": "Confused",
      "category": "Religion & Culture",
      "content": "mani",
      "title": "Who Is the best Player?",
      "created": "2016-12-28T15:00:58.777Z"
    },
    {
      "_id": "5863d3aaacaeddc00663bc07",
      "user": {
        "_id": "58072aba0f82a61823c434df",
        "displayName": "Table 1",
        "dob": "2016-12-22T18:30:00.000Z",
        "location": "chennai",
        "religion": "hindu",
        "roles": [
          "admin"
        ],
        "profileImageURL": "./modules/users/client/img/profile/uploads/ac4fbab396c2f725ed5211524f171136"
      },

      "friend_tag": [],
      "emotion": "Confused",
      "category": "Religion & Culture",
      "content": "mani",
      "title": "Who Is the best Player?",
      "created": "2016-12-28T15:00:58.777Z"
    },
    {
      "_id": "5863d3aaacaeddc00663bc07",
      "user": {
        "_id": "58072aba0f82a61823c434df",
        "displayName": "Table 1",
        "dob": "2016-12-22T18:30:00.000Z",
        "location": "chennai",
        "religion": "hindu",
        "roles": [
          "admin"
        ],
        "profileImageURL": "./modules/users/client/img/profile/uploads/ac4fbab396c2f725ed5211524f171136"
      },

      "friend_tag": [],
      "emotion": "Confused",
      "category": "Moral Ethics",
      "content": "mani",
      "title": "Who Is the best Player?",
      "created": "2016-12-28T15:00:58.777Z"
    }
  ]
}
<!doctype html>
<html ng-app>

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
  <script src="script.js"></script>
</head>

<body>
  <form ng-controller="MyCntrl">
    <div class="col-md-3">
      <label ng-repeat="item in items" style="display: block">
        <input type="checkbox" name="selectedItems[]" data-ng-model="category" value="{{item}}" ng-checked="selection.indexOf(item) > -1" ng-click="toggleSelection(item)"><span>{{item}}</span></label>
   </div>
  
    <pre style="margin-top: 30px">{{selection}}</pre>
  </form>
</body>

</html>
tanmay
  • 7,761
  • 2
  • 19
  • 38
  • thanks for your valuable answer if i used your above answer in my portal it's saved like `"category": ["true"],` i want to save values only not like true (or) false.... please check my [plunker](http://plnkr.co/edit/WOQpbclGctnarNoW1gKc?p=preview).... in my module i have coded like :- category: [{ type: String, default: '', required: 'Select Atleast Two Category', trim: true }], please check and update...thanks – R. Mani Selvam Mar 08 '17 at 12:03
  • so this plunker of your's look good then [plunker](http://plnkr.co/edit/WOQpbclGctnarNoW1gKc?p=preview) – GURURAJ DHARANI Mar 09 '17 at 11:23