Angularjs filtrage dynamique

Disons que j'ai de modèle:

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

Qui est répété:

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

Et ont une zone de saisie avec filtre modèle:

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

Quand je tape "test", il montre les deux enregistrements. Cependant, j'ai besoin de sélectionner de façon dynamique les propriétés de l'objet initial qui sera utilisé pour la recherche.

Donc, j'ai trois cases (en projet réel, j'ai plus d'options pour combiner):

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

Et dans mon controller:

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

Ce qui ne présentent pas tous les éléments en tout. Mais j'ai besoin de filtrer les éléments par différents champs de changer les propriétés de recherche à la volée (et en les combinant dans les différentes variantes)

Comment est-ce possible?

InformationsquelleAutor Sray | 2014-10-16
  1. 3

    de recherche doit être une fonction() qui se penchera sur la case de la valeur grâce à la somme de portée.

    déclarer dans votre contrôleur de quelque chose comme cela 

    $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, '\\\'); //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;
}

    Donc, à votre utilisation du modèle il

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

    Plnkr Ici

    • Je vous remercie. Mais je ne comprends pas très bien comment il va travailler. Quand je tape dans le champ de recherche, rien ne se passe comme il n'y a pas d'événement attaché à elle. En outre, à la suite de votre code, je dois spécifier tous à la recherche des champs manuellement. Mais si j'avais 20+ champs?
    • Si vous avez eu plusieurs champs, vous pouvez aussi mettre les clés dans un tableau et itérer sur les touches.
    • ok, ty! Mais comment cela fonctionne? J'ai essayé ton code mais ça ne marche pas quand je tape qch dans le champ de texte
    • Pouvez-vous faire un violon (ou quelque chose comme ça), je vais essayer de le corriger
    • Merci à l'avance. plnkr.co/modifier/oSf0VNv2Wu87GNT0zKFt
    • plnkr.co/modifier/MlpE3Cguh2T8vxbsP1wR cela fonctionne 😉

    InformationsquelleAutor Mathieu Bertin
  2. 0

    Veuillez voir exemple ci-dessous

    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>

    • Je vous remercie. Dans votre exemple, je ne peux filtrer par nom, la valeur ou l'ensemble des secteurs($). Mais comment je peux filtrer par nom+valeur? Je me demande, parce que dans la vraie projet il y a environ 20fields de sorte que votre exemple n'est pas applicable dans ce cas.
    InformationsquelleAutor sylwester