Question

我正在尝试使用https://scotch.io/tutorials/building-custom-angularjs-filters#filters-that-actually-filter中的Angular自定义过滤器示例，在我的版本中看起来像：

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="demo" >

    <div>
      
                   <p><strong>Original:</strong></p>
                   <ul class="list">
                     <li ng-repeat="x in example1">{{ x.name }}</li>
                   </ul>
                   <p><strong>Static Language Filter:</strong></p>
                   <ul class="list">
                     <li ng-repeat="x in example1 | staticLanguage">{{x.name }}</li>
                   </ul>
               
      </div>

</div>

<script>
var app = angular.module('myApp', []);
var counter=0;

app.controller('demo', function($scope){  
  $scope.example1 = [
    {name: 'C#', type : 'static'},
    {name: 'PHP', type : 'dynamic'},
    {name: 'Go', type : 'static'},
    {name: 'JavaScript', type: 'dynamic'},
    {name: 'Rust', type: 'static'}
  ];
  
});


// Setup the filter
app.filter('staticLanguage', function() {  // Create the return function and set the required parameter name to **input**
  return function(input) {
    counter+=1;
    console.log(counter);    
    var out = [];
    // Using the angular.forEach method, go through the array of data and perform the operation of figuring out if the language is statically or dynamically typed.
    angular.forEach(input, function(input) {
      if (input.type === 'static') {       
        out.push(input);
      }      
    });    
    return out;

  };
});

</script>

</body>
</html>

从console.log看来，由于某种原因，自定义过滤器函数staticLanguage被调用两次，但是从代码本身开始只调用一次：ng-repeat =“x in example1 | staticLanguage”

任何人都知道为什么？

P.S我还没弄清楚“脏检”与我的问题有什么关系...... 如果我删除了计数器变量并且只是放了一些console.log（“text”），那么staticLanguage函数仍会被调用两次

Answer 1

据我所知，这是由于AngularJS的脏检查，并在其他地方here得到了解答。这是正常的，请阅读链接。

Answer 2

这是正常的，angularjs使用＆＃39;脏检查＆＃39;方法，因此需要调用所有过滤器以查看是否存在任何更改。在此之后，它检测到您对一个变量（您键入的变量）进行了更改，然后再次重新执行所有过滤器以检测是否有其他变量。

请参阅此问题的第一个答案

How does data binding work in AngularJS?

Answer 3

好吧，我不知道这是否会对你有用，但这里有一段代码可以为你提供一个可能的解决方案：

var app = angular.module('app', []);

app.controller('mainCtrl', function($scope) {
  $scope.languages = [  
    {  
      "name":"C#",
      "type":"static"
    },
    {  
      "name":"PHP",
      "type":"dynamic"
    },
    {  
      "name":"Go",
      "type":"static"
    },
    {  
      "name":"JavaScript",
      "type":"dynamic"
    },
    {  
      "name":"Rust",
      "type":"static"
    }
  ];
  
  $scope.static_languages = $scope.languages.filter(x => x.type == 'static');
  $scope.dynamic_languages = $scope.languages.filter(x => x.type == 'dynamic');
});

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js">
</script>
</head>
<body ng-controller="mainCtrl">
  <div>
<p><strong>All languages:</strong></p>
<ul class="list">
  <li ng-bind="language.name" ng-repeat="language in languages"></li>
</ul>
<p><strong>Static Languages Filter:</strong></p>
<ul class="list">
  <li ng-bind="language.name" ng-repeat="language in static_languages"></li>
</ul>
<p><strong>Dynamic Languages Filter:</strong></p>
<ul class="list">
  <li ng-bind="language.name" ng-repeat="language in dynamic_languages"></li>
</ul>
  </div>
</body>
</html>

AngularJS自定义过滤器调用了2次

3 个答案: