Javascript 具有复位功能的角度指令

Javascript 具有复位功能的角度指令,javascript,angularjs,underscore.js,Javascript,Angularjs,Underscore.js,我有一个名为filterButton的指令,它允许用户选择filter选项并在右侧添加复选标记。现在我在filter.html中有一个重置按钮。一旦用户单击重置按钮,所有过滤器字段都将设置回默认值。我试过几种方法,但都不管用。有什么建议吗?先谢谢你 app.js app.directive('filterButton', function () { return { restrict: 'EA', templateUrl: 'template/filter-but

我有一个名为filterButton的指令,它允许用户选择filter选项并在右侧添加复选标记。现在我在filter.html中有一个重置按钮。一旦用户单击重置按钮,所有过滤器字段都将设置回默认值。我试过几种方法,但都不管用。有什么建议吗?先谢谢你

app.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 "";
            };
        }
    }
});
filter-button.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>

通过{field}进行筛选
  • {{option.name}

filter.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>

重置

您可以通过重置单击按钮重新初始化所选阵列:

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

谢谢你的快速回复。我以前试过这种方法。结果是我没有清理chrome浏览器中的缓存。但它现在起作用了。再次感谢你!您永远不会经常按ctrl+F5:)Mac用户除外:(
$scope.reset = function() {
    $scope.selectedStatus = [];
    $scope.selectedSystemType = [];
    $scope.selectedCustomer = [];
}