Search code examples
htmlangularjsmeanjs

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


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>


Solution

  • 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>