Question

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

在plunker中，有四个checkbox输入，每个values不同，但ng-model对于四个输入相同，所以如果我选中了Moral Ethics复选框，值需要保存在api中。
我正在寻找的是，就像现在如果我点击了plunker中的任何一个复选框，所有复选框都会检查相同ng-model的bcoz。实际上我们已经在后端提到了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

这是代码片段，其行为与您想要的一样。它实际上保留了一个单独的选定项目数组，并在每次检查/取消选中时保留它。

FREQ_BaseList

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

1 个答案: