2017-02-03 13 views
0

私は角度を使ってエントリに基づいてフィルタリングする検索バーを持っています。今度は、ユーザーが入力した検索語が配列内の何ものとも一致しない場合は、「何も検索に一致しません」というメッセージを表示できるようにします。角でフィルタリングされた配列の長さを知る方法

ng-changeを使用してユーザーの入力を監視してみましたが、ユーザーの入力に対してすべてのパラメータを検索しながら配列をループしますが、うまくいきません。ここに私のコードのサンプルがあります。

HTML

<input ng-model="search" ng-change="check(search)"> 
<h4 ng-if="found === 0 ">Nothing matches your search</h4> 
<div ng-controller="imCtrl" ng-repeat="imprest in imprests | filter:search"> 
    <h2>{{imprest.name}}</h2> 
</div> 

コントローラ

var office = angular.module('Office'); 

office.controller('imCtrl',[$scope,function('$scope'){ 
    $scope.imprests = [ 
      {name:'John'}, 
      {name:'Peter'} 
    ] 

    $scope.check = function (word) { 
     var found = 0 
     $scope.searching = true 
     for (var i = 0; i < $scope.vendorForms.length; i++) { 
      if($scope.imprests[i].name.includes(word){ 
       found++ 
      } 
     } 
     $scope.found = found 
     $scope.searching = true 
     $scope.done = true 
    } 
}) 

は、私は、メッセージを表示することができるので、濾過配列の長さを知ることが可能ですか?

あなたがエイリアスを使用することができます
+0

あなたはこの答えを確認することができます - https://stackoverflow.com/questions/15316363/how-to-display-length-of-filtered-ng-repea t-data?rq = 1 –

答えて

1

:次に、あなたがアクセスできる

ng-repeat="imprest in imprests | filter:search as filtered" 

を:

{{filtered.length}} 
1

あなたは、フィルタ関数を記述し、角度のコードであなたの配列をフィルタリングするためにそれを使用して、だ、それを確認することができます長さあなたはあなたがそうのように、あなたは、単にエラーを表示するng-showを追加することができ、あなたのng-change機能の代わりにこれを行うとし(imprests | filter:search).length == 0を使用することができるはずです

<div ng-controller="imCtrl" ng-repeat="imprest in myFilter()"> 
    <h2>{{imprest.name}}</h2> 
</div> 
0

のように使用することができ、マークアップで

$scope.myFilter(){ 
    // ... here your logic 
    // you need to compare with $scope.search 
    // and then return the new array and check it's length 
} 

<input ng-model="search"> 
<h4 ng-if="found === 0 ">Nothing matches your search</h4> 
<div ng-controller="imCtrl" ng-repeat="imprest in imprests | filter:search" ng-show="(imprests | filter:search).length !== 0"> 
    <h2>{{imprest.name}}</h2> 
</div> 
<div ng-show="(imprests | filter:search).length === 0"> 
    <h2>No results found</h2> 
</div> 
関連する問題