我有一个带有 bool 属性的对象数组。我需要一个三阶段下拉菜单，它将显示全部、显示事件(那些以 true 作为属性名称的)和显示垃圾(那些以 false 作为属性名称的)。在初始页面加载时，默认 View 只需为 true 的 View ，如果用户选择显示全部，则显示 true 和 false 值，如果显示垃圾，则仅显示 false 值。我当前所拥有的内容将仅加载显示的真实值，但是当我更改下拉列表中的值时，下拉列表中的所有值都会被删除。
plunkr
JS
var app = angular.module('plunker', []);
app.controller('FilterController',function($scope){
$scope.data = [{
name: 'darrin',
markedForDelete:true
},{
name: 'megan',
markedForDelete: true
},{
name: 'kim',
markedForDelete:false
},{
name: 'winky',
markedForDelete: false
}];
//show all should show both true and false
//show active should only show true
//show trash should only show false
$scope.filterOptions = [{
name: 'Show all'
},{
name: 'Show active'
},{
name: 'Show trash'
}];
$scope.customFilter = function(data){
if(data.markedForDelete){
return true;
}
if(!data.markedForDelete){
return false;
}
}
$scope.name = "Darrin";
})
HTML
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.0.x" src="http://code.angularjs.org/1.0.7/angular.min.js" data-semver="1.0.7"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="FilterController">
<input type="text" ng-model="searchText" />
<select ng-model="filterOptions" ng-options="f.name for f in filterOptions"></select>
<div ng-repeat="d in data | filter:customFilter ">{{d.name}}</div>
</div>
</body>
</html>
处理此类问题的最佳方法是什么？为什么当我对下拉列表进行更改时，其值会被删除？
最佳答案
有一些问题。首先，您需要在某个地方存储所选的过滤器选项。
//Default to first option.
$scope.selectedFilterOption = $scope.filterOptions[0];
HTML
<select ng-model="selectedFilterOption" ng-options="f.name for f in filterOptions"></select>
下一个问题是您的自定义过滤器未考虑所选过滤器。将其更改为如下内容:
$scope.customFilter = function(data) {
if ($scope.selectedFilterOption.name == 'Show all')
return true;
else if ($scope.selectedFilterOption.name == 'Show active' && data.markedForDelete == false)
return true;
else if ($scope.selectedFilterOption.name == 'Show trash' && data.markedForDelete == true)
return true;
else
return false;
}
关于javascript - 按下拉列表和文本框过滤，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24018300/