使用angularjs ng-model对复选框进行多项操作

Question

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

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

3. 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:'dipeshlohar348@gmail.com'},
        {name:'Kasif Ahamad', email:'kasif20@gmail.com'},
        {name:'Robert D Silva', email:'mouthshutqa@hotmail.com'},
        {name:'Ashish Kumar', email:'payment@myntra.com'},
        {name:'Rajesh Kumar Naik', email:'rajeshkumar.naik@gmail.com'},
        {name:'Sandeep Kanchi', email:'sandytest7@hotmail.com'},
        {name:'Robert D Silva', email:'robertdsilva@gmail.com'},
        {name:'Rahul Rana', email:'ranarahul@gmail.com'},
        {name:'Dinesh Wadibhasme', email:'wadidinesh@gmail.com'},
        {name:'Arpit Dave', email:'davearpit@gmail.com'},
        {name:'Mohini Patil', email:'mohinip@gmail.com'},
        {name:'Ashish Patil', email:'ashish_patil@gmail.com'},
        {name:'Kushank Jain', email:'kushank.jain@gmail.com'},
        {name:'Nilesh Yadav', email:'seo.nilesgyadav@gmail.com'},
        {name:'Talib Shaikh', email:'shaikh.talib@gmail.com'}
        ]

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

Answer 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:'dipeshlohar348@gmail.com', 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.