AngularJS - Access $scope from controller in custom filter

Question

I have a controller with various $scopes. I need to access one of these $scopes in a custom filter:

app.controller('AppController',
    function($scope) {
      $scope.var1 = 'Some data1';
      $scope.var2 = 'Some data2';
    }
  );

app.filter('myCustomFilter', function ($filter) {

  return function (date) {
    var date = date;
  };
});


<tr ng-repeat="data in MyData" ng-class="{true: 'green', false:'red'}[data.Date | myCustomFilter]">

</tr>

How can i pass $scope.var1 into my myCustomFilter??

I hate to be a nitpicker, but you have 1 $scope in your controller with various variables, not various $scopes. — wvdz
– wvdz, Commented Oct 30, 2014 at 10:39
@popovitsj - thanks for the pointing that out, this is just an example. — Oam Psy
– Oam Psy, Commented Oct 30, 2014 at 10:40
Possible duplicate of Access scope variables from a filter in AngularJS — Icarus
– Icarus, Commented Mar 30, 2017 at 9:49

Kalhan · Accepted Answer · 2014-10-30 10:49:37Z

6

app.filter('myCustomFilter', function ($filter) {
  return function (date, scope) {   // add scope here
    var date = date;
  };
});

ng-class="{true: 'green', false:'red'}[data.Date | myCustomFilter:this]">

edited Oct 30, 2014 at 10:49

answered Oct 30, 2014 at 10:35

Kalhan

21.9k8 gold badges71 silver badges96 bronze badges

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

2 Comments

Oam Psy Over a year ago

Tried that, undefined is returned.

Kalhan Over a year ago

you have to pass the scope like myCustomFilter:this, if you need to pass only a one you can do like myCustomFilter:var1 .please check

Julien · Accepted Answer · 2014-10-30 10:44:18Z

4

You must provide the wanted scope attribute to the filter.

You can do it like that:

Filter:

app.filter('myCustomFilter', function ($filter) {

  return function (date,myVar1) {
/* Do some stuff with myVar1 */
  };
});

HTML:

<tr ng-repeat="data in MyData" ng-class="{true: 'green', false:'red'}[data.Date | myCustomFilter:var1]">

</tr>

answered Oct 30, 2014 at 10:44

Julien

2,2363 gold badges27 silver badges31 bronze badges

Comments

sylwester · Accepted Answer · 2014-10-30 10:48:30Z

var app = angular.module('app', []);


app.controller('AppController',
  function($scope) {
    $scope.var1 = 2;
    $scope.var2 = 3;

    $scope.MyData = [{
      Date: 1
    }, {
      Date: 2
    }, {
      Date: 3
    }]

  }
);

app.filter('myCustomFilter', function($filter) {

  return function(date, scopeValue) {
    var date = date;
    return date * scopeValue
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body>
  <div ng-app="app">
    <div ng-controller="AppController">

      <li ng-repeat="data in MyData">
     Date:  {{data.Date}} | Date after myCustomFilter: {{data.Date | myCustomFilter : var1}}
      </li>
    </div>
  </div>


</body>

Collectives™ on Stack Overflow

AngularJS - Access $scope from controller in custom filter

3 Answers 3

2 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Linked

Related