2016-07-02 3 views
0

내가로부터 각도 사용자 정의 필터의 예를 시도하고있다 : 내 버전처럼 보인다 https://scotch.io/tutorials/building-custom-angularjs-filters#filters-that-actually-filter :AngularJS와 사용자 정의 필터는 2 회

<!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"

누구나 이유가 무엇입니까?

추 신 : "더티 검사"가 내 질문과 관련이있는 것이 무엇인지 아직 알지 못했습니다 ... 카운터 변수를 제거하고 일부 console.log ("text")를 staticLanguage 함수는 여전히 두 번 호출됩니다

답변

2

내가 아는 한이 AngularJS 더티 검사로 인해 다른 곳에서 here asnwered되었습니다. 이것은 정상이며 링크를 읽었습니다.

2

이것은 일반적으로, angularjs는 '더티 체크'방식을 사용하므로 모든 필터를 호출하여 변경 사항이 있는지 확인해야합니다. 이렇게하면 하나의 변수 (입력 한 변수)에 변경 사항이 있음을 감지 한 다음 모든 필터를 다시 실행하여 다른 변경 사항을 감지합니다.

이 당신에게 제공 할 경우

How does data binding work in AngularJS?

+0

그렇다면 그것은 단지 staticLanguage 일톤를 실행합니다 예? – BlackRaider

0

글쎄, 내가 모르는이 질문의 첫번째 답변을 참조하지만, 여기 당신을 위해 가능한 해결책이 될 수있는 작업 코드 조각입니다 :

내가 그것에서 카운터 변수를 제거

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>