2017-03-08 37 views
1

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

Plunker reference

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

+0

你报的答案http://stackoverflow.com/questions/14514461/how-do-i-bind-to-list-of-checkbox-values-with-angularjs是一个很好的解决方案,为什么你不这样做? –

+0

@cyril Gandon我在'form'中寻找这个,但是他们使用了'ng-repeat =“fruitName in fruits”'和所有的,我对这个解决方案有点困惑,所以你可以请更新我的plunker要知道解决方案请... –

+0

当你有api?是否有任何理由硬编码复选框? –

回答

1

下面的代码片段,它的行为就像你想要的。它实际上保存了一个单独的选定项目数组,并在每次检查/取消选中某项时维护它。

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>

+0

感谢您的宝贵答案,如果我在我的门户网站上使用您的上述答案它保存像'“类别”:[“true” ],'我想只保存值不是真的(或)false ....请检查我的[plunker](http://plnkr.co/edit/WOQpbclGctnarNoW1gKc?p=preview)....在我的模块我有类似编码: - 类别:[{0类型:字符串, 默认:'', 要求:'选择Atleast两个类别', trim:true }],请检查并更新...谢谢 –

+0

so this你的厕所瘫痪k好,然后[plunker](http://plnkr.co/edit/WOQpbclGctnarNoW1gKc?p=preview) –

相关问题