Angular dynamische Filter entfernen von ng-repeat

Question

Ich habe eine ng-Wiederholung wie folgt aus:

<div ng-repeat="user in staff | profAndDr"> 

und einen benutzerdefinierten Filter, die Menschen mit dem Titel "Dr." zeigt und "Prof." nur:

Ich muss ein Kontrollkästchen hinzufügen, das Leute mit Titel "Prof. Amaritos" zeigt, wenn diese Option aktiviert ist. Also, im Grunde muss ich meinen Filter von ng-repeat entfernen, wenn er aktiviert ist.

Link zu Codepen

Dank!

Answer 1

Sie Variablen in die Filter passieren kann, und dies dann verwenden, um festzustellen, ob Ihr Kontrollkästchen aktiviert ist.

z.B.

<div ng-repeat="user in staff | profAndDr: isChecked"> 

Dann

app.filter('profAndDr', function() { 
    return function(input, isChecked) { 
     var out = []; 
     angular.forEach(input, function(title) { 
      if (title.title === 'PROF.' || title.title==='DR.' || (isChecked && [othercondition])) { 
       out.push(title) 
      } 
     }) 
    return out; 
} 

Answer 2

Sie können zusätzliche ng-repeat ohne Filter schreiben, aber seine schlechte Praxis. Ich schlage vor, Sie übergeben wahr/falsch Flag zu filtern, die input wie zurückgegeben werden soll.

HTML

<div ng-app="staffApp"> 
    <div ng-controller="StaffListCtrl"> 
    <label for="amaritos">Show Amaritos</label> 
    <input id="amaritos" type="checkbox" ng-model="showFlag"> 
    <hr /> 
    <div 
      ng-cloak 
      ng-repeat="user in staff | profAndDr:showFlag"> 
     {{user.title}} {{user.first}} 
    </div> 
    </div> 
</div> 

Filter

phonecatApp.filter('profAndDr', function() { 
    return function(input) { 
     var out = []; 
     angular.forEach(input, function(title) { 
      if (title.title === 'PROF.'||title.title==='DR.') { 
       out.push(title) 
      } 
     }) 
    return out; 
    } 
}); 

Answer 3

Sie können den Wert der Checkbox als Parameter an den Filter passieren. Wenn Sie alles anzeigen möchten, geben Sie einfach die ursprüngliche Eingabe zurück.

app.filter('profAndDr', function() { 
    return function(input, showAmaritos) { 
    if (showAmaritos) { 
     return input; 
    } 
    var out = []; 
    angular.forEach(input, function(title) { 
     if (title.title === 'PROF.'||title.title==='DR.') { 
      out.push(title) 
     } 
    }); 
    return out; 
    } 
} 

HTML

<input id="amaritos" ng-model="showAmaritos" type="checkbox"> 

<div ng-repeat="user in staff | profAndDr:showAmaritos"> 

Siehe improved codepen

Answer 4

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

"use strict"; 

phonecatApp.controller('StaffListCtrl', ['$scope', '$filter', function   ($scope) { 
$scope.title=false; 
$scope.staff = [ 
{ 
    "first": "POZIK", 
     "last": "GOLDSMITH", 
     "title": "PROF." 
}, 
{ 
    "first": "LOSHOK", 
     "last": "GALIMIY", 
     "title": "DR." 
}, 
{ 
    "first": "SHMOK", 
     "last": "GOLDSMITH", 
     "title": "PROF. AMARITOS" 
}, 

] }])

phonecatApp.filter('profAndDr', function() { 
return function(input,test) { 
    var out = []; 
    angular.forEach(input, function(title) { 
    if(test == false){ 
     if (title.title === 'PROF.'||title.title==='DR.') { 
      out.push(title) 
     } 

    } 
    else if(test == true){ 
     if (title.title === 'PROF. AMARITOS') { 
      out.push(title) 
     } 
     } 
    }) 
return out; 
} 

js aktualisiert

});

und in Ihrem HTML

<input id="amaritos" type="checkbox" ng-model='title'> 

Answer 5

Sie ihnen eine Variable in einer ng-model Eigenschaft durch die Zuweisung den Wert Ihrer Eingaben abfangen kann. Sie können dann Ihrem Filter eine Bedingung hinzufügen, um abhängig vom Wert Ihrer Eingaben verschiedene Dinge zu tun.

http://codepen.io/anon/pen/oYmpvZ

Hoffnung, das hilft.