Question

我的应用程序必须使用单选按钮，Checkbox和AngularJS自定义过滤器（下面给出的代码）动态列出文件项。

我尝试过很少的选项，但无法获得正常工作的代码。

我创建了小提琴链接，并在下面找到相同的内容： https://jsfiddle.net/38m1510d/6/

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

谢谢。

Trade

Answer 1

这是一个工作小提琴 - 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;
          }
        });
    };
});

Answer 2

根据共享代码/小提琴，我已经简化了可能解决方案的代码。文件过滤逻辑没有预见到，因为不清楚需要做什么。

<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();    
   });

Answer 3

首先，您不必使用任何指令ng-if/ng-click来实现您想要的目标。只需更改values binding到radio button和checkbox的方式即可。此外，您只需要执行自定义过滤器来处理复选框选择，因为单选按钮是唯一的。看看我的解决方案：

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>

AngularJS自定义过滤器，带复选框和单选按钮

3 个答案: