AngularJS checkbox checking when in ng-repeat

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

Why you override value, key variables in $scope.checkStoredValues — Medet Tleukabiluly
– Medet Tleukabiluly, Commented Aug 23, 2015 at 4:35
first off, you get TypeError because foobar.products is undefined, you need to define it as array. second off have you checked all examples on vitalets.github.io/checklist-model ? — terafor
– terafor, Commented Aug 25, 2015 at 6:39

bumpy · Accepted Answer · 2015-08-22 20:18:29Z

10

+50

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>

edited Aug 22, 2015 at 20:18

answered Aug 22, 2015 at 20:09

bumpy

2,0022 gold badges14 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Andrés Soto · Accepted Answer · 2015-08-29 05:44:48Z

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.

Community · Accepted Answer · 2017-05-23 11:53:07Z

2

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.

edited May 23, 2017 at 11:53

CommunityBot

11 silver badge

answered Aug 24, 2015 at 19:54

Syed Ekram Uddin

3,1412 gold badges31 silver badges33 bronze badges

Comments

Adrian Ber · Accepted Answer · 2015-08-20 20:44:23Z

0

Add this after the checkbox

<span ng-if="my.profile.items.indexOf(product) >= 0">added</span>

and remove the div.

answered Aug 20, 2015 at 20:44

Adrian Ber

21.5k12 gold badges72 silver badges122 bronze badges

3 Comments

user1867254 Over a year ago

Nope, not working and not the solution. I wanna have the checkbox checked. My code above works perfect, but I wanna have a <input type=checkbox ng-checked=true>

Adrian Ber Over a year ago

Can you build an example on plunkr or jsfiddle? For me it works.

user1867254 Over a year ago

I know it works, but it's not the question ;-) I'll explain it more in a sec.

Collectives™ on Stack Overflow

AngularJS checkbox checking when in ng-repeat

4 Answers 4

Comments

Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related