0

ステータスの変更に基づいて、いくつかのステータスの選択ボックスがあります。アイテムを反復する必要がありますが、問題は angularjs フィルター機能が正確なテキストと一致しないことです。

HTML

<body ng-controller="sampleController">
<div>
<select ng-model="test" ng-change="getfilter()">

  <option ng-repeat="item in list">{{item.status}}</option>

</select>
<ul>

  <li ng-repeat="item in list | filter:test">{{item.name}}</li>

</ul>
<div>{{test}}</div>

コントローラ

function sampleController($scope){

   $scope.list = [
  {name: "item1", status: "shipped"},
  {name: "item2", status: 'Partially Shipped '}
  ];

  $scope.getfilter = function(){



  }

}

jsbin : http://jsbin.com/amuwol/2/edit

「出荷済み」ステータスを選択すると、「item1」のみを取得する必要がありますが、現在、「item1」と「item2」の両方を取得しています。getfilter 関数を定義したところ、さらに先に進む考えがなかったので、そこで停止しました。

さらに進むための解決策を教えてください

4

2 に答える 2

3

フィルタは正しく機能します。それはあなたが直面している問題の原因ではありません。選択shippedタグで選択すると、2 番目のオプションも表示される理由は、2 番目のアイテムのステータスに「出荷済み」-「一部出荷済み」という単語が含まれているためです。さらに、大文字と小文字を区別しないオプションを選択しました。

いくつかの選択肢があります:

  • 商品が発送済みか一部発送済みかを示す数字など、別のステータスを使用します。サブ文字または数字が複数のステータスに含まれていないことを確認してください。そうすれば、1 つのオプションを選択すると、関連性のないアイテムが実際に除外されます。
  • 推奨オプション - 3 番目のパラメーターをフィルターに渡します。この 3 番目のパラメーターは、大文字と小文字を区別する必要があるかどうかをフィルターに通知します。したがって、次
    <li ng-repeat="item in list | filter:test:true">
    のようなものを使用できます。「true」パラメーターは、Angular に大文字と小文字を区別するように指示します。Partially Shipped"大文字と小文字を変更すると、これは失敗"partially shipped"します。つまり、大文字の代わりに小文字の「出荷済み」が使用されます。
    置き場

編集: 以下で指摘されているように、フィルターで大文字と小文字を区別できるようにする「true」パラメーターの設定は、AngularJS の安定版リリースでは現在サポートされていません。

于 2013-07-12T12:29:06.207 に答える
1

angular のデフォルト フィルターは toLowerCase() を使用するため、独自のフィルターを実装する必要があります。sth。お気に入り

filters.filter('exactString', function() {
return function(string, term) {
    return ('' + string).indexOf(term) > -1;
}});

angular 1.0.7 の JsFiddle: http://jsfiddle.net/alfrescian/7sMQ8/

于 2013-07-12T12:16:30.983 に答える