Question

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

我需要的是，首先我希望所有复选框都应该是当我点击勾选所有复选框时检查。
默认情况下应该禁用我的发送邀请按钮只有在我选中任何复选框时才会启用。

根据复选框的数量，我需要动态计数邀请检查。假设检查了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>

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

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

要实现此目的，您需要执行以下步骤。

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

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

在ng-repeat中使用此选项作为 contact.isChecked 以获取复选框模型。

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

请记住，如果您计划将JSON发布回源，请删除参数isChecked in items。

使用angularjs ng-model对复选框执行多个操作

1 个答案: