Javascript 具有复位功能的角度指令
我有一个名为filterButton的指令,它允许用户选择filter选项并在右侧添加复选标记。现在我在filter.html中有一个重置按钮。一旦用户单击重置按钮,所有过滤器字段都将设置回默认值。我试过几种方法,但都不管用。有什么建议吗?先谢谢你 app.jsJavascript 具有复位功能的角度指令,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
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 = [];
}