使用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參數。