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