multiple actions on checkbox using angularjs ng-model

Question

hey I am stuck here and am new to angularjs please help..

what I need is that first I want that all the check box should be checked when I click on check all check box.
Next my send invite button should be disabled by default and should be enabled only if I check any checkbox.

I need a dynamic count of invitation depending on number of checkboxes checked. suppose 4 checkboxes are checked then it should have send 4 invitations.. please help

<div id="body_content" ng-app="invite_fr">
            <p> Invite your friends to MouthShut.com via email, or share your review on Facebook or Twitter. When you invite a friend <span class="icon icon-rupee"></span>100 is credit to your account.</p>
            <div ng-controller="listingctrl" class="contact_listing">
                <span class="icon icon-search"></span>
                <input type="text" placeholder="Search friends name or email address" ng-model="name" />
                <ul>
                    <li>
                        <input type="checkbox" ng-model="master"/>
                        <span>Check all</span>
                        <span>
                            <button class="cancel_invite_btn">Cancel</button>
                            <button class="send_invite_btn" ng-disabled="!checked">Send 10 Invitations</button>
                        </span>
                    </li>
                    <li ng-repeat="contacts in list | filter:name">
                        <input type="checkbox" ng-checked="master" ng-model="slave"/>
                        <span>{{contacts.name}}</span>
                        <span>{{contacts.email}}</span> 
                    </li>
                    <li>
                        <input type="checkbox" ng-model="master"/>
                        <span>Check all</span>
                        <span>
                            <button class="cancel_invite_btn">Cancel</button>
                            <button class="send_invite_btn" ng-disabled="!checked">Send 10 Invitations</button>
                        </span>
                    </li>
                </ul>   
            </div>
        </div>

Here is my invitefr.js

 var invite = angular.module('invite_fr', []);
    invite.controller('listingctrl', function($scope) {
        $scope.list = [
        {name:'Dipesh Malvia', email:'[email protected]'},
        {name:'Kasif Ahamad', email:'[email protected]'},
        {name:'Robert D Silva', email:'[email protected]'},
        {name:'Ashish Kumar', email:'[email protected]'},
        {name:'Rajesh Kumar Naik', email:'[email protected]'},
        {name:'Sandeep Kanchi', email:'[email protected]'},
        {name:'Robert D Silva', email:'[email protected]'},
        {name:'Rahul Rana', email:'[email protected]'},
        {name:'Dinesh Wadibhasme', email:'[email protected]'},
        {name:'Arpit Dave', email:'[email protected]'},
        {name:'Mohini Patil', email:'[email protected]'},
        {name:'Ashish Patil', email:'[email protected]'},
        {name:'Kushank Jain', email:'[email protected]'},
        {name:'Nilesh Yadav', email:'[email protected]'},
        {name:'Talib Shaikh', email:'[email protected]'}
        ]

        $scope.$watch(
          function() {
            return $scope.master + $scope.slave; }
         ,function() {
           $scope.slave = $scope.master;
        });
    });

Prashanth · Accepted Answer · 2015-07-28 06:30:06Z

1

There is only one ng-model master in the application. This can't be fed into repeat, thus checking on this will not check all the ng-repeat values.

To achieve this, you need to follow these steps.

For the received json values add one more parameter, isChecked with default false.

thus object becomes {name:'Dipesh Malvia', email:'[email protected]', isChecked : false}

Use this in the ng-repeat as contact.isChecked for the checkbox model.

Insert ng-change for the check box and toggle the state of the master checkbox based on the state. And keep the count of the isChecked for the list so as you can get the count of selected items of the list.

Remember if you have plan to post the JSON back to the source delete the parameter isChecked in items.

answered Jul 28, 2015 at 6:30

Prashanth

595 bronze badges

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

Collectives™ on Stack Overflow

multiple actions on checkbox using angularjs ng-model

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related