2016-08-25 11 views
0

私のアプリでは、最初から部分一致で名前の検索フィルタを実行しようとしています。イムがやろうと何の相続人例:JavaScriptがAngular JSを使用して検索フィルタを実行しようとしています

Ben 
James 
Adam 
Judy 
Andy 

と私の検索フィールドにテキスト "a"を入力し、それが

Adam 
Andy 

を返します:

は私が名前のリストを持っているとしましょう検索フィールドに"an"と入力すると、

Andy 

私のapp.jsでは、私が持っているコード:

<tr ng-repeat="employee in employees | filter: filtered"> 

、次の行:

var myApp = angular.module("myApp", []); 

myApp.controller("myController", function ($scope) { 
    var employees = [ 
     { name: "Ben", gender: "Male", salary: 55000, city: "London" }, 
     { name: "Jane", gender: "Female", salary: 62000, city: "Albany" }, 
     { name: "Rick", gender: "Male", salary: 65000, city: "Los Angeles" }, 
     { name: "Pam", gender: "Female", salary: 60000, city: "Paris" }, 
     { name: "Josh", gender: "Male", salary: 68000, city: "Brussels" }, 
    ]; 

    $scope.employees = employees; 

    $scope.filtered = function (item) { 
     if ($scope.searchName == undefined) { 
      return true; 
     } else { 
      if (item.name.toLowerCase().startsWith($scope.searchName.toLowerCase()) != -1) { 
       return true; 
      } 
     } 

     return false; 
    } 
}); 

そして、私のhtmlページでは、私は従業員のリストを表示する次の行を持っています

:私はこれをテストしようとすると、私はエラーを取得し、しかし

<input type="text" placeholder="Search Name" ng-model="searchName.name"> <br><br> 

:ユーザーは、検索テキストを入力します

答えて

1

ng-modelsearchName.nameに設定されているため、$scope.searchNameはオブジェクトなので、.toLowerCase()機能はありません。

あなたはこのようなあなたの場合は、ケースを調整する必要があります。

if (item.name.toLowerCase().startsWith($scope.searchName.name.toLowerCase()) !== -1) {} 

さらに、厳密な同一性が明示的に必要とされていない場合を除き、アイデンティティ演算子の代わりに、等価演算子を使用することをお勧めします。あなたは

+0

$scope.searchName.toLowerCase()ありがとうのではなく、$scope.searchName.name.toLowerCase()にコールする必要があるかもしれないので、 – skipper

1

ng-model

は、searchName.nameに設定されています。この場合、デフォルトのフィルタは「名前」の列のみを検索し、私はそれを自分のカスタムフィルタと同じにする必要があると想定していたため、「searchName.name」にng-modelを設定しました。
関連する問題