Angularjs dynamische Filterung

Sagen wir, ich habe Modell:

$scope.items = [{'name: 'test',value:'some value',category:'test'},{name:'value',value:'test',category:'test'}];

Dem iteriert wird:

<div ng-repeat="item in items|filter:search">
{{item.name}} – {{item.value}}
</div>

Haben und ein Eingabe-Feld mit filter Modell:

<input type="text" ng-model="search.$" />

Geben, wenn ich 'test', es zeigt die beiden Datensätze. Ich muss jedoch dynamisch wählen Sie die Eigenschaften des ursprünglichen Objekts, die bei der Suche verwendet werden.

So, ich habe drei Checkboxen (im realen Projekt habe ich mehr Möglichkeiten zu kombinieren):

<input type="checkbox" ng-model="search.name" />
<input type="checkbox" ng-model="search.value" />
<input type="checkbox" ng-model="search.category" />

Und in meinem controller:

$scope.search = {name: true, value: true,category: true};

Dieser zeigt nicht alle Elemente an alle. Aber ich brauche zum filtern der Elemente nach verschiedenen Felder ändern der Einstellungen zur Suche on-the-fly (und die Kombination von Ihnen in verschiedenen Varianten)

Wie ist das möglich?

InformationsquelleAutor Sray | 2014-10-16
  1. 3

    Suche eine Funktion (), die sich mit der checkbox-Wert Dank der $scope.

    erklären in Ihrem controller, so etwas wie dieses 

    $scope.customFilter = function (item) {
    if (!$scope.search.$ || (!$scope.search.value && !$scope.search.name)) {//your input field is empty or no checkbox checked
        return true;
    }

    var searchVal = $scope.search.$;
    searchVal = searchVal.replace(/([()[{*+.$^\\|?])/g, '\\$1'); //special char

    var regex = new RegExp('' + searchVal, 'i');

    var matchOnValue = false, matchOnName= false; 

    if ($scope.search.value) {
       matchOnValue = regex.test(item.value);
    }
    if ($scope.search.name) {
       matchOnName = regex.test(item.name);
    }
    return matchOnValue || matchOnName;
}

    Also in Ihrem template verwenden, es

    <div ng-repeat="item in items|filter:customFilter">
   {{item.name}} – {{item.value}}
</div>

    Plnkr Hier

    • Danke. Aber ich verstehe nicht ganz, wie es ist gonna Arbeit. Wenn ich im Suche Feld nichts passiert, da es kein Ereignis gibt, befestigt. Außerdem, nach Ihrem code, den ich angeben, Suche alle Felder manuell. Aber was, wenn ich 20+ Felder?
    • Wenn Sie mehrere Felder können Sie auch die Schlüssel in einem array und Durchlaufen auf die Tasten.
    • ok, ty! Aber wie wird dies funktionieren? Ich habe versucht, Ihr code aber es funktioniert nicht wenn ich etwas in das Textfeld
    • Können Sie ein Turnschuh (oder so ähnlich) werde ich versuchen, es zu korrigieren
    • Vielen Dank im Voraus. plnkr.co/Bearbeiten/oSf0VNv2Wu87GNT0zKFt
    • plnkr.co/Bearbeiten/MlpE3Cguh2T8vxbsP1wR es funktioniert 😉

    InformationsquelleAutor Mathieu Bertin
  2. 0

    Siehe Beispiel unten

    JS:

    var app = angular.module('app', []);

app.controller('fCtrl', function($scope) {

  $scope.items = [{
    'name': 'apple',
    value: 'yellow'
  }, {
    name: 'prune',
    value: 'red'
  }, {
    'name': 'red ',
    value: 'apple'
  }];


  $scope.name = false;
  $scope.value = false;

  $scope.filter = "$";
  $scope.search = {
    name: '',
    value: '',
    $: ''
  };
  $scope.changeFilterTo = function(pr) {

   
    $scope.filter = pr;
    $scope.search = {
      name: '',
      value: '',
      $: ''
    };
  }


});

    HTML:

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="fCtrl">
    <input type="text" ng-model="search[filter]">by {{filter}}
    <input type="radio" name="search" ng-click="changeFilterTo('name')" />Name
    <input type="radio" name="search" ng-click="changeFilterTo('value')" />Value
    <input type="radio" name="search" ng-click="changeFilterTo('$')" />$
    <div ng-repeat="item in items|filter:search">
      {{item.name}} – {{item.value}}
    </div>
  </div>
</div>

    • Danke. In deinem Beispiel kann ich nur filter durch name, Wert oder alle Felder zusammen($). Aber wie kann ich filter durch name+Wert? Ich Frage, weil im realen Projekt gibt es über 20fields also dein Beispiel ist in diesem Fall nicht anwendbar.
    InformationsquelleAutor sylwester
Schreibe einen Kommentar