649

Я написав функцію фільтра, яка повертає дані на основі аргументу, який ви передаєте. Я хочу той самий функціонал у своєму контролері. Чи можливо повторно використовувати функцію фільтра в контролері?

Це те, що я намагався поки що:

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

angularjs angular-filters ng-controller

— суманта
джерело

2

краща відповідь: stackoverflow.com/questions/20131553/…

— Раза Ахмед

1051

Введіть $ filter у свій контролер

function myCtrl($scope, $filter)
{
}

Тоді, де ви хочете використовувати цей фільтр, просто використовуйте його так:

$filter('filtername');

Якщо ви хочете передати аргументи цьому фільтру, зробіть це за допомогою окремих дужок:

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

Де arg1знаходиться масив, за яким потрібно фільтрувати, і arg2є об’єктом, який використовується для фільтрації.

— Рішення щодо Асоціації
джерело

21

Вибачте, сер, я все ще не розумію. Чи можете ви зробити Jsfiddle, щоб показати, як визначити тіло функції фільтра та як він вставляється у файл HTML?

— gm2008

34

@ gm2008 ви можете використовувати фільтр чисел, як var anyNumber = $filter('number')(12.222222, 2);отримати 12.22.

— vinesh

20

+ Я для відповіді на питання ... яке було "Як використовувати фільтр у контролері?"

— Шанімальний

8

Приклад зі збіркою у валюті "валюта": $filter("currency")(price, "$", 2)Отже, якби у вас була ціна = 200, цей вираз поверне "200,00 доларів".

— Netsi1964

2

Відповідь @ pkozlowski.opensource краща за це, оскільки вона зменшує "магічні рядки". Одна перевага - що, якщо це було у набагато складнішому контролері, і ви не змогли перевірити тестування використовуваного фільтра? Ви б не помітили помилку, якщо використовуєте $filter('filtter1')(2 т). Однак, якщо ви введете filtter1FilterКутовий, то негайно поскаржиться, що залежності не існує.

— jkjustjoshing

253

Відповідь, яку надав @Prashanth, є правильною, але існує ще простіший спосіб зробити те ж саме. В основному замість того, щоб вводити $filterзалежність та використовувати незручний синтаксис виклику її ( $filter('filtername')(arg1,arg2);), можна вводити залежність: ім'я фільтра плюс Filterсуфікс.

Беручи приклад із запитання, можна написати:

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

Слід зазначити, що ви повинні додати Filterім'я фільтра, незалежно від того, яку fooFilter
умову про іменування ви використовуєте: на foo посилається виклик fooFilter, на який посилається за допомогою викликуfooFilterFilter

— pkozlowski.opensource
джерело

38

Звичайно .. але я все одно знайду випадок використання, коли ви хочете ввести 10 фільтрів в один клас ... Такий клас, ймовірно, порушить принцип єдиної відповідальності ...

— pkozlowski.opensource

10

Просто щоб зрозуміти, що це не "незручний" синтаксис JS ... var fooFilter = $ filter ('foo'); fooFilter (arg1, arg2);

— blindgaenger

13

@OZ_ що ти маєш на увазі? Працює мінімізація чи ні. Мінімізація тут не має нічого, дивіться цей планк

— pkozlowski.opensource

2

Це ідеально підходить для використання одного фільтра, у тому випадку я стикався.

— Метью Фоцлер

2

+1 Я думаю, що синтаксис фільтра $ приховує залежності, тим самим приводячи до менш підтримуваного коду. Впорскування фільтрів "статично" - кращий вибір.

— BiAiB

79

За допомогою наступного зразкового коду ми можемо відфільтрувати масив у кутовому контролері за назвою. це засновано на наступному описі. 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>

— аамір сайджад
джерело

4

filterFilter (this.array, {name: 'Igor'}); є filterFilter ключове слово або те, що він автоматично відфільтрував дані і чому ['filterFilter', функція (filterFilter) {визначено тут! ?

— suraj rawat

Plnkr з додатковими прикладами цієї методики: plnkr.co/edit/icFurX?p=preview

— OzBob

Дуже корисний. Дякую.

— Кушаль Джейсвал

48

Ось ще один приклад використання filterв кутовому контролері:

$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.");

Просто, а?

— Майк Гледхілл
джерело

6

Це саме те, що мені було потрібно, дякую. Хоча, мабуть, це не питання. :)

— pvgoran

38

Є три можливі способи зробити це.

Припустимо, у вас є наступний простий фільтр, який перетворює рядок у великі регістри з параметром лише для першого символу.

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);

});

Примітка. Це дає вам доступ до всіх ваших фільтрів.

Призначити $filterдоvariable

Цей параметр дозволяє використовувати $filterподібне a 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);

});

Який із них ви користуєтесь, я особисто перевага, але я рекомендую використовувати третій, оскільки це найбільш читабельний варіант.

— Джефрі Росендал
джерело

15

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

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

Назва другого аргументу методу контролера має бути "$ filter", тоді лише функціональність фільтра буде працювати в цьому прикладі. У цьому прикладі я використав фільтр "малих літер".

— Іпог
джерело

12

У мене є ще один приклад, який я зробив для свого процесу:

Я отримую масив зі значенням-Опис, як це

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';
    };
})

Потім тестовий var (контролер):

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

— NtSpeed
джерело

Чи буде це працювати в angularjs 1.0.8 ?? coz його не працює для мене .. каже $ filter не визначається навіть після того, як я додав, що в контролері

— shajin

7

AngularJs дозволяє використовувати фільтри всередині шаблону або всередині контролера, директиви тощо.

у шаблоні ви можете використовувати цей синтаксис

{{ variable | MyFilter: ... : ... }}

і всередині контролера можна використовувати послугу ін'єкцій $ filter

angular.module('MyModule').controller('MyCtrl',function($scope, $filter){
    $filter('MyFilter')(arg1, arg2);
})

Якщо вам потрібно більше з прикладом демонстрації, ось посилання

Приклади фільтрування AngularJs та демонстрація

— Хазарапет Тунанян
джерело

нав’язування - це не слово. Ви маєте на увазі ін’єкцію?

— kevinc

oops.yea я маю на увазі ін'єкцію.

— Hazarapet Tunanyan

6

Існує ще один спосіб оцінювання фільтрів, який відображає синтаксис із переглядів. Виклик волохатий, але ви можете створити ярлик до нього. Мені подобається, що синтаксис рядка ідентичний тому, що ви мали б у представленні. Виглядає так:

function myCtrl($scope, $interpolate) { 
  $scope.$eval($interpolate( "{{ myvar * 10 | currency }} dollars." ))
}

— SimplGy
джерело

Це насправді дуже корисно!

— DragonKnight

1

це фантастично, оскільки дозволяє мені передавати рядок, який виглядає так, як це було б у розмітці.

— kevinc

5

Здається, ніхто не згадував, що ви можете використовувати функцію arg2 в $ filter ('ім'я фільтра') (arg1, arg2);

Наприклад:

$scope.filteredItems = $filter('filter')(items, function(item){return item.Price>50;});

— павок
джерело

2

Простий приклад дати з використанням фільтра $ у контролері:

var myDate = new Date();
$scope.dateAsString = $filter('date')(myDate, "yyyy-MM-dd");

Як пояснено тут - https://stackoverflow.com/a/20131782/262140

— AVH
джерело

1

Використовуйте код нижче, якщо ми хочемо додати кілька умов, а не одне значення в кутовому фільтрі javascript:

var modifiedArray = $filter('filter')(array,function(item){return (item.ColumnName == 'Value1' || item.ColumnName == 'Value2');},true)

— Емай Кулкарні
джерело

1

Перш за все, введіть $ filter у свій контролер, переконайтесь, що ngSanitize завантажений у вашій програмі, згодом у межах використання контролера:

$filter('linky')(text, target, attributes)

Завжди перевіряйте документи angularjs

— сердарсенай
джерело

1

якщо ви хочете фільтрувати об'єкт у контролері, спробуйте це

var rateSelected = $filter('filter')($scope.GradeList, function (obj) {
                        if(obj.GradeId == $scope.contractor_emp.save_modal_data.GradeId)
                        return obj;
                });

Це поверне відфільтрований об'єкт відповідно до умови if

— Код шпигуна
джерело

0

Повторне використання фільтра Angular.js - Перегляд / контролер

Це рішення охоплює повторне використання кутових фільтрів. Це ще один спосіб фільтрації даних, і Google посадив мене сюди, коли мені потрібно було; і мені подобається ділитися.

Використовуйте кейс

Якщо ви вже фільтруєте, скажімо, у ng-повторі у вашому перегляді (як показано нижче), то, можливо, ви визначили фільтр у контролері, як далі. І тоді ви можете повторно використовувати, як у заключних прикладах.

Приклад використання фільтра - повтор фільтрування в режимі перегляду

<div ng-app="someApp" ng-controller="someController">
    <h2>Duplicates</h2>
    <table class="table table-striped table-light table-bordered-light">
        <thead>
            <tr>
                <th>Name</th>
                <th>Gender</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="person in data | filter: searchDuplicate:true">
                <td>{{person.name}}</td>
                <td>{{person.gender}}</td>
            </tr>
        </tbody>
    </table>
</div>

Приклад визначення кутового фільтра

angular.module('someApp',[])
.controller('someController', function($scope, $filter ) {

    $scope.people = [{name: 'Bob', gender: 'male'  , hasDuplicate: true },
                     {name: 'Bob', gender: 'male'  , hasDuplicate: true },
                     {name: 'Bob', gender: 'female', hasDuplicate: false}];

    $scope.searchDuplicate = { hasDuplicate : true };
})

Отже, концепція полягає в тому, що ви вже використовуєте фільтр, створений для вашого перегляду, а потім розумієте, що хочете також використовувати його у своєму контролері.

Функція фільтра Використання в контролері Приклад 1

var dup = $filter('filter')($scope.people, $scope.searchDuplicate, true)

Функція фільтра Використання в контролері Приклад 2

Показати кнопку лише у тому випадку, якщо дублікатів не знайдено, використовуючи попередній фільтр.

Кнопка Html

<div ng-if="showButton()"><button class="btn btn-primary" ng-click="doSomething();"></button></div>

Кнопка Показати / приховати

$scope.doSomething = function(){ /* ... */ };
$scope.showButton = function(){ return $filter('filter')($scope.people, $scope.searchDuplicate, true).length == 0; };

Дехто може вважати цю версію фільтра легкою, і це варіант Angular.js.

Необов'язковий параметр компаратора "true", який використовується у поданні та у виклику функції фільтра $, вказує на необхідність суворого порівняння. Якщо опустити, значення можна шукати у кількох стовпцях.

https://docs.angularjs.org/api/ng/filter/filter

— Грег
джерело