how to create Custom filter angularjs javascript controller side?

Question

how to create Custom filter angularjs javascript controller side? i would like to search in array called segments by SegmentId, to create filter that do foreach on segments array search by SegmentId -

    //Controller

    $scope.GetSegmentDetails = function (id) {
        $scope.SegmentName = $filter('SegmentById')($scope.segments,id);
    }


    //Filter
    app.filter('SegmentById', function () {
        return function (input, searchPerson) {
        if (!searchPerson)
            return input;

        var results = [];
        angular.forEach(input, function (person) {
        }
    });

    return results;
}

});

I don't understand you want to create a filter to put logic in the controller? then you don't need a filter you can do it directly in the controller, filters are used to filter displayed data binded in HTML — Charlie, Nov 04 '14 at 15:22
@boindiil [{"SegmentId":"1","Description":"hod Registrations"}, {"SegmentId":"2","Description":"hod Inactive"}, {"SegmentId":"3","Description":"hod testUpd"}, {"SegmentId":"8","Description":"hod test"}, {"SegmentId":"1111","Description":"hod Release"}, {"SegmentId":"12","Description":"hod Requests"}, {"SegmentId":"13","Description":"hod Welcome Back"}] — hod caspi, Nov 04 '14 at 15:31
@Charlie yes i know i can do it directly as private function, there is also a need to do it on the page it self, the same functionality... — hod caspi, Nov 04 '14 at 15:32
oh ok well have you tried to import the filter object of your angular module in your controller? because I am not sure components in a module know about each others implicitly not sure how to do it but you should find smth with google — Charlie, Nov 04 '14 at 15:43

score 4 · Accepted Answer · answered Nov 04 '14 at 15:39

4

You dont have to write your one filter to filter by SegmentId. Here you have an example

function MyCtrl($scope, $filter) {
  $scope.data = [{"SegmentId":"1","Description":"hod Registrations"}, {"SegmentId":"2","Description":"hod Inactive"}, {"SegmentId":"3","Description":"hod testUpd"}, {"SegmentId":"8","Description":"hod test"}, {"SegmentId":"1111","Description":"hod Release"}, {"SegmentId":"12","Description":"hod Requests"}, {"SegmentId":"13","Description":"hod Welcome Back"}]
  
  $scope.filterData = function(segmentId) {
    return $filter('filter')($scope.data, { SegmentId: segmentId });
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="MyCtrl">
  Full:
  <ul>
    <li ng-repeat="Segment in data">
      {{Segment.SegmentId}}
    </li>
  </ul>
  Filtered in View:
  <ul>
    <li ng-repeat="Segment in data | filter:{SegmentId:1111}">
      {{Segment.SegmentId}}
    </li>
  </ul>
  Filtered in Controller:
  <ul>
    <li ng-repeat="Segment in filterData(1111)">
      {{Segment.SegmentId}}
    </li>
  </ul>
</div>

answered Nov 04 '14 at 15:39

boindiil

5,805
1
28
31

Great thanks! working great i have another issue with the order of loading module into controller. which mean $filter suppose to be second after $scope – hod caspi Nov 05 '14 at 09:08
Take a look a [this link](http://thegreenpizza.github.io/2013/05/25/building-minification-safe-angular.js-applications/) – boindiil Nov 05 '14 at 13:14
@boindiil How to achieve `SegmentId !== segmentId` using $filter ? – gaurav bhavsar Aug 25 '15 at 13:15
1

@gauravbhavsar You could use the [negation within filter](http://stackoverflow.com/questions/13278371/angularjs-filter-negated) – boindiil Aug 25 '15 at 20:05
@boindiil (+1) Thanks :) – gaurav bhavsar Aug 26 '15 at 07:19

score 1 · Answer 2 · answered Dec 09 '15 at 17:10

1

Only need to add in your controller the filter dependency and then call it.

app.controller("YourController", ['$scope', '$filter', function ($scope, $filter){

$filter('filterName')($args));

}]);

answered Dec 09 '15 at 17:10

Juan José González

138
3

how to create Custom filter angularjs javascript controller side?

2 Answers2