Number of checkboxes checked using javascript, angularJS and bootstrap

Question

I have a tag using a class="glyphicon glyphicon-shopping-cart" from bootstrap. And I would like to add on the bottom right the number of check-boxes checked and to display the new number each time the user checked or unchecked on of the box. My glyphicon is in the header and the check-boxes are displayed in a ng-repeat loop. I have some difficulty with angularjs and I don't really know how to do it, if I have to use a directive, or a controller. If you got any kind of help for it I will take it.

My view where are check-boxes itemSearch-result.js there is no controller, only directives

<tbody>
     <tr ng-repeat="item in chart.items>
         ...
         <td>{{ ad.price | ypcurrency }}</td>
         <td> <input type="checkbox"> </td>
     </tr>
</tbody>

My header view, with a controller: ng-controller="HeaderCtrl"

<ul class="nav-right pull-right list-unstyled">
        <li>
          <a class="toggle-min" href>
              <i class="glyphicon glyphicon-shopping-cart"></i>
          </a>
        </li>
        <li class="dropdown text-normal nav-profile" dropdown>
            <a href class="dropdown-toggle" dropdown-toggle>
                <span class="hidden-xs">
                    <span>{{user.firstName}} {{user.lastName}}</span>
                </span>
                <i class="fa fa-user"></i>
            </a>
        </li>
        ...
</ul>

should be failry easy to loop through the model that the checkboxes ng-model's are bound to. Show us some markup — charlietfl
– charlietfl, Commented Apr 27, 2015 at 22:31
Is your header and the shopping cart list all inside one controller? Or do you have it broken up as header, details etc? I had a similar app and i used a service which calculated the total items in the cart and displayed it in the detail page as well as the header cart icon. If you give me more information on how your page is structured, I can help you with code — shivas
– shivas, Commented Apr 28, 2015 at 0:11
I update some things but my code is so long that i can't show you evreything — mel
– mel, Commented Apr 28, 2015 at 10:25

Community · Accepted Answer · 2017-05-23 11:50:48Z

0

There are lots of ways to accomplish this. First of all, make sure you know the difference between a directive and a controller shown here.

Look into using events as you need to talk to another controller/module.

That way you can create a service that gets injected into both controllers to update the amount of selected items (as opposed to using $rootScope) and set it on your glyphicon. (Not sure about that without seeing your code)

edited May 23, 2017 at 11:50

CommunityBot

11 silver badge

answered Apr 27, 2015 at 21:36

jcc

1,1471 gold badge12 silver badges33 bronze badges

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

Collectives™ on Stack Overflow

Number of checkboxes checked using javascript, angularJS and bootstrap

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related