私は、ユーザーがテキストボックスに入力したものに応じてリストをフィルタリングしたいと思います。私はangularJSを使用しています。なぜコードは動作していないのですか？

私はmyFilterという名前の私自身のフィルターを作成し、myFilterを通して人の配列をパイプしようとします。出力は「名前を入力：」と続き、その後にテキストボックスが続きます。 AやB、Cなどの文字を書こうとしても何も表示されません。私は、ユーザーがテキストボックスに入力したものに応じてリストをフィルタリングしたいと思います。私はangularJSを使用しています。なぜコードは動作していないのですか？

<!DOCTYPE html> 
<html> 
    <head> 
     <script src 
    ="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"> 
     </script> 
    </head> 
    <body> 
     <div ng-app="myApp" ng-controller="myCtrl"> 
      <p>Enter name: <input type="text" ng-model="test" /></p> 
      <ul> 
       <li ng-repeat="x in person | myFilter"> 
        {{x}} 
       </li> 
      </ul> 
     </div> 

     <script> 
      var app = angular.module('myApp', []); 
      app.filter('myFilter', function() 
            { 
             return function(x, test) 
               { 
                var i, c=0; 
               for (i=0; i<test.length; i++) 
               { 
                if (x[i] == test[i]) 
                { 
                 c++; 
                } 
               } 
               if (c==test.length) 
               { 
                return x; 
               } 
               } 
            }); 

      app.controller('myCtrl', function($scope) 
           { 
            $scope.person = ['Alex', 'Buddy', 
             'Bob', 'Aaron', 'Clay', 'Clayton']; 
           }); 
     </script> 
    </body> 
</html>

出典

2017-12-24 Prateek Kembhavi

これは完璧に動作しますがtest'が – user184994

ここにいくつかの問題があります。

最初に、testが定義されていないため、エラーが発生しています。これはあなたが何か値を渡していないからです。

<li ng-repeat="x in person | myFilter: test">

しかし、最初に、それは価値がありませんので、我々はまた、追加する必要があるので、あなたも、それは未定義/ nullをされて扱う必要があります：あなたはそうのように、フィルタに値を渡す必要があります。

if (test == null) { 
    test = ""; 
}

最後に、フィルタのロジックも変更する必要があります。 xの値は名前の配列になります。 testの値は文字列になります。 if (x[i] == test[i])を実行しているときに、文字列の中の文字の1つである==のいずれかをテストしています。

私の代わりに、私が代わりに行うのは、入力されたもので名前が始まっていることを確認することです。ここで

は実施例である：

var app = angular.module('myApp', []); 
 
app.filter('myFilter', function() { 
 
    return function(x, test) { 
 
    var i, c = 0; 
 
    // Set default value: 
 
    if (test == null) { 
 
     test = ""; 
 
    } 
 
    
 
    return x.filter(function(name) { 
 
     return name.indexOf(test) === 0; 
 
    }); 
 
    } 
 
}); 
 

 
app.controller('myCtrl', function($scope) { 
 
    $scope.person = ['Alex', 'Buddy', 
 
    'Bob', 'Aaron', 'Clay', 'Clayton' 
 
    ]; 
 
});

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"> 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <div ng-app="myApp" ng-controller="myCtrl"> 
 
    <p>Enter name: <input type="text" ng-model="test" /></p> 
 
    <ul> 
 
     <li ng-repeat="x in person | myFilter: test"> 
 
     {{x}} 
 
     </li> 
 
    </ul> 
 
    </div> 
 

 
</body> 
 

 
</html>

出典

2017-12-24 09:21:35 user184994

未定義である 'ので、あなたがエラーを取得している、の文字にアクセスする方法がありますxの配列要素はフィルタの関数の中にありますか？ –

'x.filter'関数の中で' array.from（name） 'を使うと' name'からの文字配列を返します – user184994

私は、ユーザーがテキストボックスに入力したものに応じてリストをフィルタリングしたいと思います。私はangularJSを使用しています。なぜコードは動作していないのですか？

答えて

関連する問題