user3107804 user3107804 - 18 days ago 7
AngularJS Question

Filter ng-repeat with array having Strings

I am trying to filter

ng-repeat
with array having strings, how to use multiple filter or how to directly filter using array below?

Filtering Array :

["Thu","Fri","Mon","Tue","Wed","Thu","Fri"]


Array used at ng-repeat :

["Fri, November 18th 2016","Sat, November 19th 2016","Sun, November 20th 2016","Mon, November 21st 2016","Tue, November 22nd 2016","Wed, November 23rd 2016","Thu, November 24th 2016"]


JSP:

<div class="form-group" ng-repeat="vdates in view | filter : selecteddays ">

Answer

Why not using your own custom filter function to check if at least one of the expected days in the list matches with your input value ?
I am not sure we can do this kind of processing (specifying an array and filter with as condition : at least a match between the flow and any element of the array) with an inline filtering.

Here is a plunkr.

HTML :

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.5.x" src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <div class="form-group" ng-repeat="vdates in view | filter : myFilter">
         {{vdates}}
    </div>
  </body>

</html>

JS :

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

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

      $scope.name = 'World';
      $scope.view = ["Fri, November 18th 2016","Sat, November 19th 2016",
                     "Sun, November 20th 2016","Mon, November 21st 2016",
                     "Tue, November 22nd 2016","Wed, November 23rd 2016",
                     "Thu, November 24th 2016" ];

      $scope.selecteddays=["Thu","Fri","Mon","Tue","Wed","Thu","Fri"];

      $scope.myFilter = function(value) {

            if (!value){return false}

            for (var i = 0; i < $scope.selecteddays.length; i++) {
                currentAcceptedDay = $scope.selecteddays[i];
                 if (value.indexOf(currentAcceptedDay) != -1) {                        
                    return true;
                }
            }
            return false;
        }
    });