Winkel- "Mehrfach" -Wertfilter

-1

Ich brauche etwas Hilfe mit Winkelfilter. Ich muss Array nach mehreren Werten in einem Feld filtern.Winkel- "Mehrfach" -Wertfilter

Array sieht wie folgt aus:

$scope.items = [{ 
    "item": "one", 
    "tags": "2,5" 
}, { 
    "item": "two", 
    "tags": "3,4,6,7" 
}, { 
    "item": "three", 
    "tags": "1,3,5" 
}];

I Artikel von Tags suchen, die durch Komma getrennt sind.

Beispiel: Im Suchfeld Benutzereingabetags durch Komma getrennt (oder durch Kontrollkästchen auswählen) und Tags 1 und 3 auswählen. Wie listet man alle Elemente auf, die diese Tags haben? In diesem Beispiel zweiter und dritter Punkt.

Plunker

https://plnkr.co/edit/6SidABYsjtrjtH3xqusA?p=preview

Quelle

2016-09-21 akuljana

können Sie einen plunkr mit Ihrem Code machen wird es besser sein, um Ihr Problem zu lösen –

Gibt es einen Grund, warum Ihre Tags ein Komma getrennte Zeichenfolge sind? Wäre es nicht besser für sie Arrays zu sein? Ie: '" Tags ": [1,3,5]' – Martin

Hier ist Ihre gewünschte Antwort mit Hilfe der Kontrollkästchen.

angular.module('app', []) 
 
    .controller('Controller', function($scope) { 
 
    $scope.items = [{ 
 
     "name": "one", 
 
     "tags": "2,5" 
 
    }, { 
 
     "name": "two", 
 
     "tags": "3,4,6,7" 
 
    }, { 
 
     "name": "three", 
 
     "tags": "1,3,5" 
 
    }]; 
 

 
    $scope.items_dup = $scope.items 
 
    // checkbox selection 
 
    $scope.selection = []; 
 
    $scope.toggleSelection = function toggleSelection(filter) { 
 
     var idx = $scope.selection.indexOf(filter); 
 
     if (idx > -1) { 
 
     $scope.selection.splice(idx, 1); 
 
     } else { 
 
     $scope.selection.push(filter); 
 
     } 
 
    }; 
 

 
    // filter list 
 
    $scope.filter = function() { 
 
     filterTag($scope.selection,$scope.items); 
 
     function filterTag(selected,items){ 
 
     var out = []; 
 
     angular.forEach(items, function(value, key) { 
 
      angular.forEach(selected, function(inner_value, key) { 
 
      if(value.tags.split(',').indexOf(inner_value.toString()) > -1) 
 
      { 
 
       if(out.indexOf(value) == -1) 
 
       { 
 
       out.push(value) 
 
       } 
 
      } 
 
      }) 
 
     }) 
 
     if(out.length > 0) 
 
     { 
 
      $scope.items_dup = out; 
 
     } 
 
     else 
 
     { 
 
      $scope.items_dup = $scope.items; 
 
     } 
 
     } 
 
     
 
    }; 
 
    })

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script> 
 
</head> 
 
<body ng-app="app"> 
 
    <div ng-controller="Controller"> 
 
    <h1>Tag filter!</h1> 
 
    <li ng-repeat="item in items_dup"> 
 
     {{item.name}} 
 
    </li> 
 
    <hr> 
 
    <p>Select filter</p> 
 
    <label> 
 
     <input type="checkbox" value="1" ng-click="toggleSelection(1)"> 1 
 
    </label> 
 
    <br> 
 
    <label> 
 
     <input type="checkbox" value="2" ng-click="toggleSelection(2)"> 2 
 
    </label><br> 
 
    <label> 
 
     <input type="checkbox" value="3" ng-click="toggleSelection(3)"> 3 
 
    </label> 
 
    <br><br> 
 
    <button ng-click="filter()">Filter list</button> 
 
    </div> 
 
</body> 
 

 
</html>

Bitte den Code-Schnipsel ausführen und überprüfen.

Here is the plunker

Quelle

2016-09-21 12:07:54 Sravan

@akuljana hast du das versucht? – Sravan

Sravan das ist großartig, aber meine Tags sind nicht Array, das ist das Problem. Und ich kann das nicht in Array auf Datenquelle konvertieren. Wie ändere ich Ihre Lösung, um kommagetrennte Tags zu verwenden? – akuljana

Hai, aktualisierte die Antwort, bitte überprüfen. – Sravan

<table> 
    <tr> 
     <td align="right">Search :</td> 
     <td><input ng-model="query" /></td> 
    </tr> 
    <tr> 
     <td align="right">Search By :</td> 
     <td> 
      <select ng-model="query"> 
       <option value="1">1</option> 
       <option value="2">2</option> 
       <option value="3">3</option> 
       <option value="4">4</option> 
      </select> 
     </td> 
    </tr> 
    </table> 
    <hr> 
    <div> 
    <table> 
     <tr ng-repeat="item in items | filter:query"> 
      <td>{{item.item}}</td> 
     </tr> 
    </table> 



    var employeeApp = angular.module("EmployeeApp",[]); 
    employeeApp.controller("empCtrl",function($scope){ 

    $scope.items = [{ 
     "item": "one", 
     "tags": "2,5" 
    }, { 
     "item": "two", 
     "tags": "3,4,6,7" 
    }, { 
     "item": "three", 
     "tags": "1,3,5" 
    }]; 
    $scope.orderProp="";     
    });

Quelle

2016-09-21 11:41:19

select ist nicht gut, da der Benutzer mehrere Tags auswählen kann. – akuljana

Winkel- "Mehrfach" -Wertfilter

Antwort

Verwandte Themen