带有复选框和单选按钮的AngularJS自定义过滤器
[英]AngularJS custom filter with checkbox and radio button
问题描述
My application has to dynamically list file items using a Radio button, Checkbox and AngularJS custom filter (code given below). 
我的应用程序必须使用单选按钮，复选框和AngularJS自定义过滤器（下面给出的代码）动态列出文件项。
I have tried few options, but could not get the working code. 我尝试了几种选择，但无法获得工作代码。
I have created the fiddle link and find the same below: https://jsfiddle.net/38m1510d/6/ 我创建了小提琴链接，并在下面找到了它： https : //jsfiddle.net/38m1510d/6/
Could you please help me to complete the below code to list the file items dynamically ? 您能帮我完成以下代码来动态列出文件项吗？
Thank you. 谢谢。
<div ng-app="myApp" ng-controller="myCtrl">
<label>
<input type="radio" ng-model="inputCreatedBy" value="byX"
ng-click="myFilter(?, ?)"> by X
<input type="radio" ng-model="inputCreatedBy" value="byAll"
ng-click="myFilter(?, ?)"> by All
</label> <br/><br/>
<label>
<input type='checkbox' ng-model='Type1Files' ng-change='myFilter(?, ?)'>Type1 files
<input type='checkbox' ng-model='Type2Files' ng-change='myFilter(?, ?)'>Type2 files
</label>
<br/><br/>
<label ng-repeat="file in displayFiles | filter: myFilter(createdBy, fileType)">
{{ file.name }}
</label>
</div>
</body>
<script>
var app = angular.module("myApp",[]);
app.controller('myCtrl', function ($scope) {
$scope.files = [
{ name: 'file1', type:'Type1', createdBy: 'X' },
{ name: 'file2', type:'Type2', createdBy: 'X' },
{ name: 'file3', type:'Type2', createdBy: 'Y' },
{ name: 'file4', type:'Type1', createdBy: 'Y' }
];
$scope.displayFiles = [];
$scope.myFilter = function() {
return new function(createdBy, fileType) {
var displayFilesTemp = [];
for(i=0;i<$scope.files.length;i++) {
if($scope.files[i].type ==fileType && $scope.files[i].createdBy == createdBy && !checkArrayContainsObject(displayFilesTemp, displayFiles[i])) {
displayFilesTemp.push(displayFiles[i]);
}
}
return displayFilesTemp;
};
};
});
function checkArrayContainsObject(a, obj) {
for (var i = 0; i < a.length; i++) {
if (JSON.stringify(a[i]) == JSON.stringify(obj)) {
return true;
}
}
return false;
}
</script>
3 个解决方案
解决方案1
1 已采纳 2016-07-18 14:30:34
Here's a working fiddle - http://jsfiddle.net/1gfaocLb/ 这是一个有效的小提琴-http: //jsfiddle.net/1gfaocLb/
Radio is a unique value, so it's easy to filter by. 收音机是一个独特的价值，因此很容易过滤。 Selected types are array of values so it's needs a little more attention. 所选类型是值数组，因此需要多加注意。
myApp.filter('typesFilter', function() {
return function(files, types) {
return files.filter(function(file) {
if(types.indexOf(file.type) > -1){
return true;
}else{
return false;
}
});
};
});
解决方案2
0 2016-07-18 14:11:02
According the shared code / fiddle, I've simplified the code for a possible solution. 根据共享的代码/小提琴，我已经简化了代码以提供可能的解决方案。 The file filtering logic is not foreseen since it was not clear what needed to be done exact. 由于尚不清楚需要准确执行哪些操作，因此无法预见文件过滤逻辑。
<body ng-app="myapp">
<div ng-controller="myctrl">
<label>
<input type="radio" ng-model="inputCreatedBy" value="byX"
ng-click="filterFiles()"> by X
<input type="radio" ng-model="inputCreatedBy" value="byAll"
ng-click="filterFiles()"> by All
</label> <br/><br/>
<label>
<input type='checkbox' ng-model='Type1Files' ng-change='filterFiles()'>Type1 files
<input type='checkbox' ng-model='Type2Files' ng-change='filterFiles()'>Type2 files
</label>
<br/><br/>
<label ng-repeat="file in filteredFiles">
{{ file.name }} <br/>
</label>
</div>
</body>
var app = angular.module("myapp",[])
app.controller('myctrl', function ($scope) {
$scope.files = [
{ name: 'file1', type:'Type1', createdBy: 'X' },
{ name: 'file2', type:'Type2', createdBy: 'X' },
{ name: 'file3', type:'Type2', createdBy: 'Y' },
{ name: 'file4', type:'Type1', createdBy: 'Y' }
];
$scope.filterFiles = function(){
// init dict
var files = [];
// loop & check files
angular.forEach($scope.files, function(value, key) {
// do file check and push to files.push when matching with criteria
files.push(value);
});
// set scope files
$scope.filteredFiles = files;
}
// init filter on ctrl load
$scope.filterFiles();
});
解决方案3
0 2016-07-19 04:08:21
First, you don't have to use any directive as ng-if/ng-click to achieve what you want. 首先，您无需在ng-if/ng-click使用任何指令即可实现所需的功能。 Just changing how the values are binding into the radio button and checkbox can do the trick. 只需更改将values binding到radio button和checkbox即可达到目的。 Also you just need to do a custom filter to handle the checkbox selections, since radio button is unique. 另外，由于单选按钮是唯一的，因此您只需要做一个自定义过滤器来处理复选框选择。 Take a look on my solution: 看一下我的解决方案：
angular.module("myApp", []) .controller('myCtrl', function($scope) { $scope.files = [ { "name":"file1", "type":"Type1", "createdBy":"X" }, { "name":"file2", "type":"Type2", "createdBy":"X" }, { "name":"file3", "type":"Type2", "createdBy":"Y" }, { "name":"file4", "type":"Type1", "createdBy":"Y" } ]; }) .filter('typesFilter', function() { return function(files, types) { if (!types || (!types['Type1'] && !types['Type2'])) { return files; } return files.filter(function(file) { return types['Type1'] && file.type == 'Type1' || types['Type2'] && file.type == 'Type2'; }); }; });
<html ng-app="myApp"> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script> </head> <body ng-controller="myCtrl"> <form action="" name="form"> Created by: <input type="radio" id="radio1" ng-model="criteria.createdBy" value="X"> <label for="radio1">by X</label> <input type="radio" id="radio2" ng-model="criteria.createdBy" value=""> <label for="radio2">by All</label> <br/> <br/> Type: <input type="checkbox" id="check1" ng-model="criteria.type['Type1']"> <label for="check1">Type1 files</label> <input type="checkbox" id="check2" ng-model="criteria.type['Type2']"> <label for="check2">Type2 files</label> </form> <pre ng-bind="criteria | json"></pre> <div ng-repeat="file in files | filter: { createdBy: criteria.createdBy } | typesFilter: criteria.type" ng-bind="file.name"></div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.