javascript - 带有复选框和单选按钮的 AngularJS 自定义过滤器

Question

我的应用程序必须使用单选按钮、复选框和 AngularJS 自定义过滤器动态列出文件项(代码如下)。

我尝试了几个选项，但无法获得工作代码。

我已经创建了 fiddle 链接并发现以下内容: https://jsfiddle.net/38m1510d/6/

您能帮我完成以下代码以动态列出文件项吗？

谢谢。

<div ng-app="myApp" ng-controller="myCtrl">
     <label>
          <input type="radio" ng-model="inputCreatedBy" value="byX"
            ng-click="myFilter(?, ?)"> by X&nbsp;&nbsp;&nbsp;&nbsp;
          <input type="radio" ng-model="inputCreatedBy" value="byAll"
            ng-click="myFilter(?, ?)"> by All&nbsp;&nbsp;&nbsp;&nbsp;
    </label> <br/><br/>

    <label>
          <input type='checkbox' ng-model='Type1Files' ng-change='myFilter(?, ?)'>Type1 files&nbsp;&nbsp;&nbsp;&nbsp;
           <input type='checkbox' ng-model='Type2Files' ng-change='myFilter(?, ?)'>Type2 files&nbsp;&nbsp;&nbsp;&nbsp;
    </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>

Answer 1

这是一个工作 fiddle - http://jsfiddle.net/1gfaocLb/

Radio 是一个独特的值，因此很容易进行过滤。所选类型是值数组，因此需要多加注意。

myApp.filter('typesFilter', function() {
   return function(files, types) {
        return files.filter(function(file) {
          if(types.indexOf(file.type) > -1){
            return true;
          }else{
            return false;
          }
        });
    };
});