CODEWITHSUNDEEP
angularjs
Daniel
Daniel

Reputation: 1755

How to pass two parameters in filter Angular JS?

I have made custom filter:

.filter('inArray', function() {

      return function(input, array) {
        console.log(input);
        if(array.indexOf(input)!== -1){
                return "red";
            } else {
                return "";
        }
      };
    })

I tried to use this in class attribute:

class="{{inArray | filter:3}}"

But it is silent when I do console.log(input); inside filter

Upvotes: 1

Views: 1638

Answers (2)

John McArthur
John McArthur

Reputation: 1024

I've got it working like this:

(function() {

  angular
    .module("app", ["ui.bootstrap"]);

  angular
    .module("app")
    .controller("AppController", AppController);

  AppController.$inject = ["$scope"];

  function AppController($scope) {
    var vm = this;


    vm.myArray=["1", "2", "3"];


  }
  
  angular
    .module("app")
    .filter('inArray', function() {

      return function(input, array) {
        console.log(input);
        if(array.indexOf(input)!== -1){
                return "red";
            } else {
                return "";
        }
      };
    })

})();
<!DOCTYPE html>
<html ng-app="app">

<head>
  <link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <script data-require="jquery@2.2.4" data-semver="2.2.4" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <script data-require="bootstrap@3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script data-require="angular.js@1.6.1" data-semver="1.6.1" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
  <script data-require="ui-bootstrap@*" data-semver="2.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="app.js"></script>
</head>

<body ng-controller="AppController as vm">
  
  <h1 style="color:{{'2'| inArray: vm.myArray}}">2 is in the array</h1>
  <h1 style="color:{{'5'| inArray: vm.myArray}}">5 is not in the array</h1>
  


</body>

</html>

Upvotes: 2

Sebastian Ullrich
Sebastian Ullrich

Reputation: 1047

Just pass additional parameters like this

class="{{"someInput"| inArray:'param1':'param2'}}"

Upvotes: 1

Related Questions