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
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="[email protected]" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script data-require="[email protected]" data-semver="2.2.4" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script data-require="[email protected]" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script data-require="[email protected]" 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>Just pass additional parameters like this
class="{{"someInput"| inArray:'param1':'param2'}}"
{{inArray | filter:item.name:filter}}