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

Question

嘿，我被困在这里，是angularjs的新手，请帮助..

1. 我需要的是，首先我希望在单击“全部选中”复选框时选中所有复选框。
2. 接下来，默认情况下应禁用我的发送邀请按钮，并且仅当我选中任何复选框时才应启用。

3. 我需要动态检查邀请，具体取决于已选中复选框的数量。 假设选中了4个复选框，那么它应该已经发送了4个邀请。.请帮助

    <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> 

这是我的vitrefr.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

该应用程序中只有一个ng-model master。 这不能重复进行，因此选中它不会检查所有ng-repeat值。

为此，您需要按照以下步骤。

对于接收到的json值，再添加一个参数isChecked，默认值为false。

因此对象变为{name：'Dipesh Malvia'，email：'dipeshlohar348@gmail.com'， isChecked：false }

在ng-repeat中使用它作为contact.isChecked的复选框模型。

插入ng-change作为复选框，然后根据状态切换主复选框的状态。 并保留列表的isChecked的计数，以便获得列表中所选项目的计数。

请记住，如果您打算将JSON发回到源中，请删除项目中的isChecked参数。