javascript - 具有重置功能的 Angular Directive(指令)

Question

我有一个名为 filterButton 的指令，它将让用户选择过滤器选项并在右侧添加复选标记。现在我在 filter.html 中有一个重置按钮。一旦用户单击重置按钮，所有筛选字段将设置回默认值。我尝试了几种方法，但没有用。有什么建议吗？提前谢谢你。

应用程序.js

app.directive('filterButton', function () {
return {
        restrict: 'EA',
        templateUrl: 'template/filter-button.html',
        replace: true,
        scope: {
                list: '=', //two-way binding
                selected: '=', //two-way binding
                field: '@', //one-way binding
        },
        link: function ($scope) {
            $scope.selected = [];
            $scope.setSelectedOption = function() {
                var id = this.option.id;

                if(_.contains($scope.selected, id)) {
                    $scope.selected = _.without($scope.selected, id)
                } else {
                    $scope.selected.push(id);
                }
                return false;
            };
            $scope.isChecked = function(id) {
                if(_.contains($scope.selected, id)) {
                    return "fa fa-check pull-right-selected";
                }
                return "";
            };
        }
    }
});

过滤器按钮.html

<div class="row filter-item">
<div class="btn-group" dropdown is-open="{open: open}">
    <button type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle ng-disabled="disabled">Fiter By {{field}} <span class="caret"></span></button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu">
        <li data-ng-repeat="option in list" class="dropdown-btn"> <a data-ng-click="setSelectedOption()">{{option.name}}<span data-ng-class="isChecked(option.id)"></span></a></li>
    </ul>
</div>

过滤器.html

<filter-button list="statusList" selected="selectedStatus" field="Status" popover="Error Customer? or No Error Customer?" popover-trigger="mouseenter"></filter-button>
<filter-button list="systemList" selected="selectedSystemType" field="System Type" popover="N+1 or Stand alone?" popover-trigger="mouseenter"></filter-button>
<filter-button list="customerFilterList" selected="selectedCustomer" field="Customer" popover="Male or Female?" popover-trigger="mouseenter"></filter-button>
<div class="row filter-item">
    <div class="filter-label">
        <button class="btn btn-primary">Reset</button>
    </div>
</div>

Answer 1

您可以在重置点击按钮上重新初始化选定的阵列:

<button class="btn btn-primary" ng-click="reset()">Reset</button>

在你的 Controller 中:

$scope.reset = function() {
    $scope.selectedStatus = [];
    $scope.selectedSystemType = [];
    $scope.selectedCustomer = [];
}