如何根据angularjs中的值select两个或多个复选框？

Question

如何根据 angularjs 中的值 select 两个或多个复选框？

在 plunker 中有四个 checkbox 输入，每个 values 是不同的，但是 ng-model 对于四个输入是相同的，所以如果我检查 Moral Ethics checkbox 这个值需要保存在 api.
我真正看到的是，如果我在 plunker 中单击任何一个复选框，所有复选框都会被选中，因为相同 ng-model。实际上我们已经提到 ng-model 作为后端的数组，所以如果单击两个复选框中的任何一个，选中的值只会保存在后端...

例如：在plunker中我想点击Moral Ethics复选框和Social network这两个值只需要检查并且应该保存为数组json 后端数据。

这个jsbin link正是我们想要的。我们尝试了很多方法，但无法找到解决方案。所以请检查并更新我的 plunker 以了解确切的解决方案。

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>

Answer 1

这是您想要的代码片段。它实际上保留了一个单独的所选项目数组，并在每次 check/uncheck 时维护它。

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>

如何根据angularjs中的值select两个或多个复选框？

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

html

angularjs

meanjs