22

AngularJs UI の先行入力機能はシンプルで強力に見えますが、主な文字でマッチングを行う方法を見つけようとしています。たとえば、入力ボックスに「A」と入力すると、名前に「A」が含まれるすべての州ではなく、「A」で始まるすべての州が表示されます。この上で、Angular には「コンパレーター」を持つカスタム フィルターの概念があるようです。これに関するドキュメントには、コンパレーターを実装するための正確な構文を示していない簡単な例があります。

html は次のようになります。

<div>Selected: <span>{{selected}}</span></div>
    <div><input type="text" ng-model="selected" typeahead="name for name in states | filter:selected"></div>

基本的なJavaScriptは次のようになります

angular.module('firstChar', ['ui.bootstrap']);

    function TypeaheadCtrl($scope) {
        $scope.selected = undefined;
        $scope.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'];
    }

ここにプランカーがありますhttp://plnkr.co/edit/LT6pAnS8asnpFEd5e6Ri

つまり、簡単に言えば、課題は、AngularUI の先行入力を主要な文字のみに一致させることです。

これに関するヘルプやアイデアは大歓迎です。

4

3 に答える 3

54

結局のところ、あなたの質問はディレクティブに固有のものではありませんが、typeaheadAngularJS フィルターの仕組みに関係しています。

typeahead実際のソリューションを提示する前に、ディレクティブが AngularJS インフラストラクチャ ($http、promise) と式言語を多用していることに注意してください。states | filter:selectedしたがって、は AngularJS 式にすぎないことを理解することが重要です。

上記の式を見て、配列をフィルタリングして一致するアイテムのリストを返す方法を見つける必要があります。typeahead ディレクティブの唯一の特別な点は$viewValue、ユーザーが入力ボックスに入力した値を表す変数があることです。したがって、基本的には、配列をフィルタリングして、statesで始まる項目を返すだけで済み$viewValueます。

これを行うには多くの方法がありますが、フィルターのコンパレーターについて言及したため (これらは AngularJS の 1.1.x バージョンでのみ導入されたことに注意してください)、特定のアイテムを使用する必要があるかどうかを決定するコンパレーター関数を定義する必要があります。結果のリストに返されるかどうか。このような関数は次のようになります。

$scope.startsWith = function(state, viewValue) {
  return state.substr(0, viewValue.length).toLowerCase() == viewValue.toLowerCase();
}

使用方法を定義するのは非常に簡単です。

typeahead="name for name in states | filter:$viewValue:startsWith"

ここに作業プランクがあります: http://plnkr.co/edit/WWWEwU4oPxvbN84fmAl0?p=preview

于 2013-08-25T17:20:10.553 に答える