I have list of products and each product having list of students. I have product JSON to display; Within that product JSON I another JSON for student:
[{"CustId":7191,"CFirstName":"Kynan"},{"CustId":29689,"CFirstName":"Pete"},{"CustId":29690,"CFirstName":"Gina"},{"CustId":29692,"CFirstName":"Jo"}]
I want to add checkboxes for each student and for each product.
Here is what i have done for each product:
<span ng-repeat="customer in productVM.product.Customers">
<label class="checkbox-inline" style='margin-left:0px !important; margin-right: 10px !important; '>
<input class="options" ng-model="customer.CustId" type='checkbox' name="selectedStudent[]"
value="{{customer.CustId}}" ng-checked="selection.indexOf(customer.CFirstName) > -1" ng-click="toggleSelection(customer.CFirstName)">
{{customer.CFirstName}}
</label>
</span>
Angular code:
$scope.selection = [];
$scope.toggleSelection = function toggleSelection(customerName) {
var idx = $scope.selection.indexOf(customerName);
// is currently selected
if (idx > -1) {
$scope.selection.splice(idx, 1);
}
// is newly selected
else {
$scope.selection.push(customerName);
}
};
I have two problems: 1. Whenever I click on any checkbox of a product; similar checkbox for all product gets checked(similar when I unchecked). 2. How I can get value of selected checkboxes.
id
attribute on input
element. ng-model
https://docs.angularjs.org/api/ng/directive/ngModel - value is not necessary for default use of checkboxes... just define new field in customer object (for example customer.checked) and bind it to ng-model
directive.
<span ng-repeat="customer in productVM.product.Customers"> <label for="{{customer.CustId}}" class="checkbox-inline" style="margin-left:0px !important; margin-right: 10px !important;"> <input id="{{customer.CustId}}" class="options" ng-model="customer.checked" type="checkbox" name="customerCheck" ng-click="toggleSelection($index)"/> {{customer.CFirstName}} </label> </span>
This worked for me:
<label class="checkbox-inline" style='margin-left:0px !important; margin-right: 10px !important; '>
<input class="options" ng-model="selection[productVM.product.Id].customers[customer.CustId]" type='checkbox' name="selectedStudent[]"
value="{{customer.CustId}}">
{{customer.CFirstName}}
</label>
Source:
http://stackoverflow.com/questions/27148320/how-to-use-checkbox-with-nested-ng-repeat-in-angularjs
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.