2016-11-19 18 views
1

配列を文字列に持つng-repeatをフィルタリングしようとしています。複数のフィルタを使用する方法、または下の配列を使って直接フィルタする方法はありますか?文字列を持つ配列を持つ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:NGリピートで使用

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

アレイ

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

問題は何ですか? –

+0

あなたは何の質問もしないことを明確に述べていません –

+0

Stringを持つ配列でng-repeatをフィルタリングすることを明確に求めています。最初の配列はフィルタリング用で、もう1つはng-repeat –

答えて

0

少なくともかどうかを確認するために、独自のカスタムフィルタ機能を使用していないのはなぜリストの予想日の1つが入力値と一致していますか? 私はこの種の処理(条件として配列とフィルタを指定する:少なくともフローと配列の要素との一致を指定する)をインラインフィルタリングで行うことはできません。

ここには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="[email protected]" 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; 
     } 
    }); 
関連する問題