AngularJSのfilterで前方一致や後方一致を使用する方法

filterはデフォルトは部分一致

AngularJSには ngモジュールのフィルターの一つであるfilterを使用すれば配列から一部を選択し、それを新しい配列として返すことができます。しかし部分一致したものを返すため電話番号など前方一致で返されたほうがよいものには使いづらいです。

filterを前方一致で返す方法

下記のコードのようにfilterに作成した関数を:customFilterのように追加して$scope.filterCustom = function(expected, actual)のように記述すればデータの値(expected)と入力した値(actual)を取得することができます。

まず、actual.lengthでinput内に入力した文字列の長さを取得します。

そしてactualの文字数分のデータの値(expected)とactualが前方部分が一致するか調べます。一致したらデータの値(expected)を返します。

// 前方一致コントローラー
app.controller("BeginWithMatch", function ($scope) {
  $scope.filterCustom = function(expected, actual) {
    // 入力した文字列の長さを取得
    var len = actual.length;

    // 前方一致
    if(expected.substr(0, len) === actual) {
      return expected;
    }
  };
  $scope.items = [
    {name:"AAA"},
    {name:"BBB"},
    {name:"ABC"},
    {name:"AXC"}
  ];
});

filterを後方一致で返す方法

前方一致の逆でactualの文字数分のデータの値(expected)とactualが後方部分が一致するか調べます。一致したら同じくデータの値(expected)を返します。入力がないときに配列をすべて返すようif文にactual===""を追記。

// 後方一致コントローラー
app.controller("EndWithMatch", function ($scope) {
  $scope.filterCustom = function(expected, actual) {
    // 入力した文字列の長さを取得
    var len = actual.length;

    // 後方一致
    if(expected.slice(-len) === actual || actual === "") {
      return expected;
    }
  };
  $scope.items = [
    {name:"AAA"},
    {name:"BBB"},
    {name:"ABC"},
    {name:"AXC"}
  ];
});

filterの大文字と小文字を区別しない

以上のやり方は厳密等価演算子(===)を使用しているため英字の大文字と小文字を区別する。区別しない場合はtoLowerCase()で小文字にしてから比較させる。

expected.substr(0, len).toLowerCase() === actual.toLowerCase()

1.3.8以上では使用不可

この記述方法で前方一致および後方一致が動作するのはAngularJSのバージョン1.3.7以下までなので注意が必要。

AngularJSのfilterで前方一致や後方一致サンプル