AngularJS custom filter with checkbox and radio button

Question

My application has to dynamically list file items using a Radio button, Checkbox and AngularJS custom filter (code given below).

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/

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&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>

i've created a fiddle to show a possible approach. The different filters & checks were unclear to me so i did not foresee any logics. jsfiddle.net/wL7a5whd — daan.desmedt
– daan.desmedt, Commented Jul 18, 2016 at 13:59

krutkowski86 · Accepted Answer · 2016-07-18 14:30:34Z

1

Here's a working fiddle - 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;
          }
        });
    };
});

answered Jul 18, 2016 at 14:30

krutkowski86

1,0839 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vasu Over a year ago

Thanks a lot for your help :-)

daan.desmedt · Accepted Answer · 2016-07-18 14:11:02Z

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

developer033 · Accepted Answer · 2016-07-19 04:38:01Z

First, you don't have to use any directive as ng-if/ng-click to achieve what you want. Just changing how the values are binding into the radio button and checkbox can do the trick. 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>

Collectives™ on Stack Overflow

AngularJS custom filter with checkbox and radio button

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related