[angularjs] 컨트롤러에서 필터를 사용하는 방법은 무엇입니까?

Program / 글쓴이

전달하는 인수를 기반으로 데이터를 반환하는 필터 함수를 작성했습니다. 컨트롤러에서 동일한 기능을 원합니다. 컨트롤러에서 필터 기능을 재사용 할 수 있습니까?

이것이 지금까지 시도한 것입니다.

function myCtrl($scope,filter1)
{ 
    // i simply used the filter function name, it is not working.
}

답변

컨트롤러에 $ filter 를 주입 하십시오

function myCtrl($scope, $filter)
{
}

그런 다음 해당 필터를 사용하려는 경우 다음과 같이 사용하십시오.

$filter('filtername');

해당 필터에 인수를 전달하려면 별도의 괄호를 사용하여 인수를 수행하십시오.

function myCtrl($scope, $filter)
{
    $filter('filtername')(arg1,arg2);
}

arg1필터링하려는 배열은 어디에 있고 필터링하는 arg2데 사용되는 객체입니다.

답변

@Prashanth의 답변은 정확하지만 더 쉬운 방법이 있습니다. 기본적으로 $filter종속성 을 주입하고 호출하는 어색한 구문을 사용 하는 대신 $filter('filtername')(arg1,arg2);필터 이름과 Filter접미사로 종속성을 주입 할 수 있습니다 .

질문에서 예를 들면 다음과 같습니다.

function myCtrl($scope, filter1Filter) { 
  filter1Filter(input, arg1);
}

Filter사용하는 명명 규칙에 관계없이 필터 이름에 추가해야합니다 . foo는 호출하여 참조됩니다. fooFilter
fooFilter는 호출 하여 참조됩니다.fooFilterFilter

답변

다음 샘플 코드를 사용하여 각도 컨트롤러에서 배열을 이름별로 필터링 할 수 있습니다. 이것은 다음 설명을 기반으로합니다.
http://docs.angularjs.org/guide/filter

this.filteredArray = filterFilter (this.array, {name : ‘Igor’});

JS :

 angular.module('FilterInControllerModule', []).
    controller('FilterController', ['filterFilter', function(filterFilter) {
      this.array = [
        {name: 'Tobias'},
        {name: 'Jeff'},
        {name: 'Brian'},
        {name: 'Igor'},
        {name: 'James'},
        {name: 'Brad'}
      ];
      this.filteredArray = filterFilter(this.array, {name:'Igor'});
    }]);

HTML

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-example96-production</title>


  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.3/angular.min.js"></script>
  <script src="script.js"></script>



</head>
<body ng-app="FilterInControllerModule">
    <div ng-controller="FilterController as ctrl">
    <div>
      All entries:
      <span ng-repeat="entry in ctrl.array">{{entry.name}} </span>
    </div>
    <div>
      Filter By Name in angular controller
      <span ng-repeat="entry in ctrl.filteredArray">{{entry.name}} </span>
    </div>
  </div>
</body>
</html>

답변

filterAngular 컨트롤러에서 사용 하는 또 다른 예는 다음과 같습니다 .

$scope.ListOfPeople = [
    { PersonID: 10, FirstName: "John", LastName: "Smith", Sex: "Male" },
    { PersonID: 11, FirstName: "James", LastName: "Last", Sex: "Male" },
    { PersonID: 12, FirstName: "Mary", LastName: "Heart", Sex: "Female" },
    { PersonID: 13, FirstName: "Sandra", LastName: "Goldsmith", Sex: "Female" },
    { PersonID: 14, FirstName: "Shaun", LastName: "Sheep", Sex: "Male" },
    { PersonID: 15, FirstName: "Nicola", LastName: "Smith", Sex: "Male" }
];

$scope.ListOfWomen = $scope.ListOfPeople.filter(function (person) {
    return (person.Sex == "Female");
});

//  This will display "There are 2 women in our list."
prompt("", "There are " + $scope.ListOfWomen.length + " women in our list.");

간단 해?

답변

이를 수행 할 수있는 세 가지 방법이 있습니다.

다음과 같은 간단한 필터가 있다고 가정 해 봅시다. 첫 번째 문자에 대해서만 매개 변수를 사용하여 문자열을 대문자로 변환합니다.

app.filter('uppercase', function() {
    return function(string, firstCharOnly) {
        return (!firstCharOnly)
            ? string.toUpperCase()
            : string.charAt(0).toUpperCase() + string.slice(1);
    }
});

직접 통해 $filter

app.controller('MyController', function($filter) {

    // HELLO
    var text = $filter('uppercase')('hello');

    // Hello
    var text = $filter('uppercase')('hello', true);

});

참고 : 모든 필터에 액세스 할 수 있습니다.

할당 $filterA와variable

이 옵션을 사용하면 다음 $filter과 같은 것을 사용할 수 있습니다 function.

app.controller('MyController', function($filter) {

    var uppercaseFilter = $filter('uppercase');

    // HELLO
    var text = uppercaseFilter('hello');

    // Hello
    var text = uppercaseFilter('hello', true);

});

특정로드 만 Filter

에 필터 이름을 추가하여 특정 필터 만로드 할 수 있습니다 Filter.

app.controller('MyController', function(uppercaseFilter) {

    // HELLO
    var text = uppercaseFilter('hello');

    // Hello
    var text = uppercaseFilter('hello', true);

});

어떤 것을 사용하는 것이 개인 취향에 달려 있지만 가장 읽기 쉬운 옵션이므로 세 번째를 사용하는 것이 좋습니다.

답변

function ngController($scope,$filter){
    $scope.name = "aaaa";
    $scope.age = "32";

     $scope.result = function(){
        return $filter('lowercase')($scope.name);
    };
}

컨트롤러 메소드의 두 번째 인수 이름은 “$ filter”여야하며, 필터 기능 만이 예제에서 작동합니다. 이 예제에서는 “소문자”필터를 사용했습니다.

답변

내 프로세스를 위해 만든 또 다른 예가 있습니다.

이처럼 값 설명이있는 배열을 얻습니다.

states = [{
    status: '1',
    desc: '\u2713'
}, {
    status: '2',
    desc: '\u271B'
}]

내 Filters.js에서 :

.filter('getState', function () {
    return function (input, states) {
        //console.log(states);
        for (var i = 0; i < states.length; i++) {
            //console.log(states[i]);
            if (states[i].status == input) {
                return states[i].desc;
            }
        }
        return '\u2718';
    };
})

그런 다음 테스트 변수 (컨트롤러) :

function myCtrl($scope, $filter) {
    // ....
    var resp = $filter('getState')('1', states);
    // ....
}