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
– Charlie, Commented Nov 4, 2014 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
– hod caspi, Commented Nov 4, 2014 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
– hod caspi, Commented Nov 4, 2014 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
– Charlie, Commented Nov 4, 2014 at 15:43

boindiil · Accepted Answer · 2014-11-04 15:39:03Z

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 4, 2014 at 15:39

boindiil

5,8652 gold badges31 silver badges31 bronze badges

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

4 Comments

hod caspi Over a year ago

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

boindiil Over a year ago

Take a look a this link

gaurav bhavsar Over a year ago

@boindiil How to achieve SegmentId !== segmentId using $filter ?

boindiil Over a year ago

@gauravbhavsar You could use the negation within filter

Juan José González · Accepted Answer · 2015-12-09 17:10:38Z

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 9, 2015 at 17:10

Juan José González

1383 bronze badges

Collectives™ on Stack Overflow

how to create Custom filter angularjs javascript controller side?

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related