AngularJS checkbox checking when in ng-repeat - angularjs

Question

I know the solution is not very pretty, but it's needed for the template I'm working in.
Now it works, and it shows me the "Added" span-element when the products was in the list.
<section ng-repeat="product in products">
<label>
<input type="checkbox"
checklist-model="foobar.products"
checklist-value="product.id">
{{ product.name }}
</label>
<div ng-repeat="current_item in my.profile.items">
<span ng-show="product.id==current_item.id">Added</span>
</div>
</section>
What I want, it to check the checkbox to checked, when the "Added" text also appeared behind the checkbox.
I tried doing it with:
<ng-checked="{{my.profile.items.array.thing}}">
But that's not working. Because the products in an Array like:
[{
id: 1, name:"Trinity",
id: 2, name:"Van Gogh",
id: 3, name:"Bonaqua",
}]
And the my.profile.items is an array with more info then above. Because it's a many-to-many relation where I stored it.
Is there even a way to do this? I don't mind a dirty solution :P
I tried this:
// NG-check function
$scope.checkStoredValues = function(my) {
// Loop trought my current stored items
angular.forEach(my.profile.items, function(value, key) {
// Loop trough the array
angular.forEach(value, function(value, key) {
console.error(key);
// If key == 'id'
if(key == 'id'){
// Push the value to the Array of the checkboxes,
// so it's checked
// # Docs: http://vitalets.github.io/checklist-model/
console.info(value); // Return's: integer
foobar.products.push(value); // Needs more then an integer I guess..
}
});
});
};
This returns: TypeError: Cannot read property 'push' of undefined

Answer 1

Add this function to your controller:
$scope.isChecked = function(product) {
var items = $scope.my.profile.items;
for (var i=0; i < items.length; i++) {
if (product.id == items[i].id)
return true;
}
return false;
};
And for your html use
<section ng-repeat="product in products">
<label>
<input type="checkbox"
ng-checked="isChecked(product)">
{{ product.name }}
</label>
<div ng-repeat="current_item in my.profile.items">
<span ng-show="product.id==current_item.id">Added</span>
</div>
</section>

Answer 2

Another trick that you can do is create a view model specific for your need.
So for example you have the array of products and items within the profile.
In the controller, you could do something like:
$scope.products.forEach(function(p){
var items = $scope.my.profile.items;
var wasAdded = false;
for (var i=0; i < items.length; i++) {
if (product.id == items[i].id)
wasAdded = true;
i = items.length;
}
$scope.productsViewModels.push({product:p, added:wasAdded});
});
Now that you have created your data as needed in the view, then you can simple do:
<section ng-repeat="p in productsViewModels">
<label>
<input type="checkbox"
ng-checked = "p.added"
checklist-model="foobar.products"
checklist-value="p.product.id">
{{ p.product.name }}
</label>
<span ng-show="p.added">Added</span>
</section>
When I have combined data from multiple sources I prefer to process it before in the controller and create a viewModel that will makes my life easy in the view.

Answer 3

you need to implement something like this AngularJs ng-checked using a function
you just need to implement your own logic based on your many to many product array and return true or false accordingly.

Answer 4

Add this after the checkbox
<span ng-if="my.profile.items.indexOf(product) >= 0">added</span>
and remove the div.