jeudi 22 septembre 2016

Angular Uncheck All Checkboxes in Directive

I know very little about directives. I'm working with a directive created by someone else. It displays a dropdownlist of checkboxes. I need to have a button (outside of the directive) that clears all of the checkboxes. The reason I need it outside of the directive is that the directive is part of a form. The button needs to clear the entire form. I can clear all of the other fields except for the checkboxes in the directive. I haven't a clue where or how to begin. Here is the directive code:

angular.module('ssq.shared').directive('checkboxPicklist', function() {
    return {
        restrict: 'E',
        templateUrl: '/Scripts/app/Shared/directives/checkboxPicklist.html',
        replace: true,
        scope: {
            itemId: '=',
            list: '=',
            nameProp: '=',
            title: '@',
            searchPlaceholder: '@',
            callbackFn: '&',
            callMore: '&'
        },
        link: function (scope, element, attrs) {
            scope.query = '';

            var child = element.find('.dropdown-menu');
            child.on({
                'click': function (e) {
                    e.stopPropagation();
                }
            });

            var selectedItemFn = function (item) {
                return item.selected;
            };

            scope.getSelectedCount = function () {
                return _.filter(scope.list, selectedItemFn).length;
            };
            scope.loadMore = function () {
                scope.callMore();
            };

            scope.allSelected = function(list) {
                var newValue = !scope.allNeedsMet(list);
                _.each(list, function(item) {
                    item.selected = newValue;
                    scope.callbackFn({ object: item });
                });
            };

            scope.allNeedsMet = function(list) {

                var needsMet = _.reduce(list, function(memo, item) {
                    return memo + (item.selected ? 1 : 0);
                }, 0);
                if (!list) {
                    return (needsMet === 0);
                }
                return (needsMet === list.length);
            };
        }
    };
});
})();

Here is the template for the directive:

<div class="pec-checkbox-picklist btn-group btn-group-picklist">
<button id="" class="form-control dropdown-toggle" data-toggle="dropdown">
    <span class="cbpl-btn-text"> </span><span class="caret"></span>

</button>
<ul class="dropdown-menu dropdown-menu-complex" data-complex-menu style="overflow-y: scroll" lazy-load load-more="loadMore()">
    <li class="list-group-item search-item">
        <input class="form-control" type="text" placeholder="" ng-model="query" />
        <button type="button" class="btn btn-small" ng-show="query" ng-click="query = undefined">clear</button>
    </li>
    <li class="divider" ng-hide="query"></li>
    <li class="list-group-item" ng-hide="query">
        <label class="checkbox">
            <input type="checkbox" ng-click="allSelected(list)" ng-checked="allNeedsMet(list)">
            Select All
        </label>
    </li>
    <li class="divider"></li>
    <li class="list-group-item" ng-repeat="item in list | searchFilter:nameProp:query">
        <label class="checkbox" title="">
            <input type="checkbox" ng-model="item.selected" ng-change="callbackFn({object: item})">
            
        </label>
    </li>
</ul>

Here is the Html where the directive is used:

<div class="ps-xxs-hidden">
                    <div class="col-md-12">
                        <checkbox-picklist data-item-id="'servicesPicklist'"
                                           data-search-placeholder="Search Services"
                                           data-list="services"
                                           data-title="Service(s)"
                                           data-name-prop="'vchDescription'"
                                           data-callback-fn="addService(object)"
                                           call-more="loadMoreServices()">

                        </checkbox-picklist>
                    </div>
                    <div class="col-md-12">
                        <checkbox-picklist data-item-id="'areasPicklist'"
                                           data-search-placeholder="Search Areas"
                                           data-list="areas"
                                           data-title="State(s)/Province(s)"
                                           data-name-prop="'vchStateLongName'"
                                           data-callback-fn="addArea(object)"
                                           call-more="loadMoreAreas()">
                        </checkbox-picklist>
                    </div>
                    <div class="col-md-12">
                        <checkbox-picklist data-item-id="'verificationsPicklist'"
                                           data-search-placeholder="Search Verifications"
                                           data-list="verifications"
                                           data-title="Verification(s)"
                                           data-name-prop="'vchDescription'"
                                           data-callback-fn="addVerification(object)"
                                           call-more="loadMoreVerifications()">
                        </checkbox-picklist>
                    </div>
                    <div class="col-md-12">
                        <checkbox-picklist data-item-id="'subscriptionsPicklist'"
                                           data-search-placeholder="Search Subscriptions"
                                           data-list="subscriptions"
                                           data-title="Subscription(s)"
                                           data-name-prop="'vchDescription'"
                                           data-callback-fn="addSubscription(object)"
                                           call-more="loadMoreSubscriptions()">
                        </checkbox-picklist>
                    </div>
                </div>
            <div class="container-fluid row">
            <div class="col-md-12">
                <span class="pull-left">
                    <button type="button" class="btn btn-primary" ng-click="clearFilters()" Clear></button>
                </span>
                <span class="pull-right">
                    <button id="searchSubmit" type="button" class="btn btn-primary" ng-click="submit2()">Apply</button>
                </span>
            </div>
        </div>

In my controller I have written a function to clear out the form selections, but I am unable to figure out how to uncheck the checkboxes in the directive from this function. I'm actually not sure if it is even possible. Here is the function:

    $scope.clearFilters = function () {
    $scope.form.selected.services = [];
    $scope.form.picked.areas = [];
    $scope.form.certified.verifications = [];
    $scope.form.subscribed.subscriptions = [];
    $scope.form.OperatorBusinessUnitID = null;
    $scope.form.OperatorBusinessUnitID = null;
};

Any assistance is greatly appreciated!!!




Aucun commentaire:

Enregistrer un commentaire