如何根据angularjs中的值选择两个或多个复选框?如何根据angularjs中的值选择两个或多个复选框?
在plunker有各自的一个
values
4个checkbox
投入不同,但ng-model
是相同的四个输入,所以如果我检查Moral Ethics
复选框,这个值是必须保存的API。我的确看起来像现在如果我点击任何一个复选框在所有的复选框检查bcoz的相同
ng-model
。实际上我们已经提到ng-model
在后端阵列,因此,如果单击任何两个复选框是选中值仅是节省后端...
例如:在plunker我要点击Moral Ethics
复选框, Social network
这两个值只需要检查,它应该保存为后端数组json数据。
这个jsbin link正是我们想要的。我们尝试了很多方法,但无法找到解决方案。因此,请检查并更新我的蹦床,以了解确切的解决方案。
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>
你报的答案http://stackoverflow.com/questions/14514461/how-do-i-bind-to-list-of-checkbox-values-with-angularjs是一个很好的解决方案,为什么你不这样做? –
@cyril Gandon我在'form'中寻找这个,但是他们使用了'ng-repeat =“fruitName in fruits”'和所有的,我对这个解决方案有点困惑,所以你可以请更新我的plunker要知道解决方案请... –
当你有api?是否有任何理由硬编码复选框? –