javascript - 使用 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>
   

这是我的invitationfr.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 发布回源，请删除 items 中的 isChecked 参数。