wake-up-neo.com

Wie verwende ich einen Filter in einer Steuerung?

Ich habe eine Filterfunktion geschrieben, die Daten basierend auf dem übergebenen Argument zurückgibt. Ich möchte die gleiche Funktionalität in meinem Controller. Ist es möglich, die Filterfunktion in einer Steuerung wiederzuverwenden?

Das habe ich bisher versucht:

function myCtrl($scope,filter1)
{ 
    // i simply used the filter function name, it is not working.
}
angularjsangular-filtersng-controller
630
sumanth

Injizieren Sie $ filter in Ihren Controller

function myCtrl($scope, $filter)
{
}

Wo immer Sie diesen Filter verwenden möchten, verwenden Sie ihn einfach wie folgt:

$filter('filtername');

Wenn Sie diesem Filter Argumente übergeben möchten, verwenden Sie separate Klammern:

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

Wobei arg1 das Array ist, nach dem gefiltert werden soll, und arg2 das Objekt ist, nach dem gefiltert wird.

1032
JSAddict

Die Antwort von @Prashanth ist richtig, aber es gibt noch eine einfachere Möglichkeit, dasselbe zu tun. Anstatt die Abhängigkeit $filter einzuschleusen und umständliche Syntax zum Aufrufen ($filter('filtername')(arg1,arg2);) zu verwenden, kann man folgende Abhängigkeit einschleusen: Filtername plus das Suffix Filter.

Nehmen wir ein Beispiel aus der Frage, die man schreiben könnte:

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

Es ist zu beachten, dass Sie Filter an den Filternamen anhängen müssen, unabhängig davon, welche Namenskonvention Sie verwenden: Auf foo wird verwiesen, indem Sie fooFilter aufrufen.
fooFilter wird referenziert, indem fooFilterFilter aufgerufen wird

247
pkozlowski.opensource

Mit dem folgenden Beispielcode können wir das Array in angular controller nach Namen filtern. Dies basiert auf der folgenden Beschreibung. 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>
78
aamir sajjad

Hier ist ein weiteres Beispiel für die Verwendung von filter in einem Angular Controller:

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

Einfach, hey?

47
Mike Gledhill

Dafür gibt es drei Möglichkeiten.

Angenommen, Sie haben den folgenden einfachen Filter, der eine Zeichenfolge in Großbuchstaben umwandelt und einen Parameter nur für das erste Zeichen enthält.

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

Direkt durch $filter

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

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

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

});

Hinweis: Damit haben Sie Zugriff auf alle Ihre Filter.

Weisen Sie $filter einem variable z

Mit dieser Option können Sie den $filter wie einen function verwenden.

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

    var uppercaseFilter = $filter('uppercase');

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

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

});

Lade nur ein bestimmtes Filter

Sie können nur einen bestimmten Filter laden, indem Sie den Filternamen mit Filter anhängen.

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

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

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

});

Welches Sie verwenden, wird von Ihnen bevorzugt, ich empfehle jedoch das dritte, da es die am besten lesbare Option ist.

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

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

Der Name des zweiten Arguments der Controllermethode sollte "$ filter" lauten, damit nur die Filterfunktionalität mit diesem Beispiel funktioniert. In diesem Beispiel habe ich den "Kleinbuchstaben" -Filter verwendet.

15
Ipog

Ich habe ein anderes Beispiel, das ich für meinen Prozess gemacht habe:

Ich erhalte ein Array mit der folgenden Wertebeschreibung

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

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

Dann eine Testvariable (Controller):

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

Mit AngularJs können Sie Filter innerhalb von Vorlagen oder innerhalb von Controllern, Direktiven usw. verwenden.

in der Vorlage können Sie diese Syntax verwenden

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

und innerhalb des Controllers können Sie den $ -Filterservice verwenden

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

Wenn Sie mehr mit Demo-Beispiel benötigen, ist hier ein Link

AngularJs Filterbeispiele und Demo

7
Hazarapet Tunanyan

Es gibt eine andere Möglichkeit, Filter auszuwerten, die die Syntax der Ansichten widerspiegeln. Der Aufruf ist haarig, aber Sie könnten eine Verknüpfung dazu erstellen. Mir gefällt, dass die Syntax der Zeichenfolge mit der einer Ansicht identisch ist. Sieht aus wie das:

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

Es scheint, dass niemand erwähnt hat, dass Sie eine Funktion als arg2 in $ filter ('filtername') (arg1, arg2); verwenden können

Zum Beispiel:

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

Ein einfaches Datumsbeispiel für die Verwendung von $ filter in einem Controller wäre:

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

Wie hier erklärt - https://stackoverflow.com/a/20131782/26214

2
AVH

Verwenden Sie den folgenden Code, wenn Sie mehrere Bedingungen anstelle eines einzelnen Werts in Javascript hinzufügen möchten. angular filter:

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

Zuerst injiziere $ filter in deinen Controller und stelle sicher, dass ngSanitize in deiner App geladen ist. Später wird der Controller wie folgt verwendet:

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

Schauen Sie sich immer die AngularJS-Dokumente an

1
serdarsenay

wenn Sie Filterobjekt in der Steuerung verwenden möchten, versuchen Sie dies

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

Dies gibt ein gefiltertes Objekt gemäß falls Bedingung zurück

0
Code Spy