Question

我制作了自定义过滤器：

.filter('inArray', function() {

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

我尝试在class属性中使用它：

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

但是当我在过滤器<{p>>内console.log(input);时，它是静默的

Answer 1

我的工作方式如下：

(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>

Answer 2

只需传递其他参数

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

如何在过滤器Angular JS中传递两个参数？

2 个答案: