2016-08-08 4 views
1

質問します。私はすでにangularjsフィルタを検索していましたが、私の解決策は何ですか?私は、IONICフレームワークを使用してアンドロイドアプリを作成するために角度を使用します。angularjs - 2つの数値の間のフィルタ値

私は価格のデータを持っています。私は価格帯でそれをフィルタリングしたい。

例:

name  type  price 
item01 fruit  25000 
item02 vegetable 50000 
item03 vegetable 10000 

私は

<select ng-value="fprice"> 
    <option value="">All</option> 
    <option value="0">0-24999</option> 
    <option value="25000">25000-49999</option> 
</select> 

<select ng-value="ftype"> 
    <option value="">All</option> 
    <option value="fruit">Fruit</option> 
    <option value="vegetable">Vegetable</option> 
</select> 

をフィルタリングするための2選択ボックスを持っている私は、didntはショーitem02第二の値(価格)を選択した場合、私はしたいです。

私は

<ion-list> 
    <ion-item ng-repeat="item in items | filter: { type: ftype, price: ??? }"> 
    {{item.name}}<br> 
    {{item.type}}<br> 
    {{item.price}} 
    </ion-item> 
</ion-list> 

ようなコードは私のコードで私の???のためのコードは何ですか?私はいくつかを試してみましたが、私が探しているものはまだ見つけられません。

ありがとうございます。悪い英語で申し訳ありません。

答えて

0

カスタムフィルタを作成できます。私は例を投稿するjsfiddle

あなたが望むものを置くことができます。私はリンク

<div ng-app="autoDrops" ng-controller="DropsController"> 
<select ng-model="fprice"> 
    <option value="">All</option> 
    <option value="0">0-24999</option> 
    <option value="25000">25000-49999</option> 
</select> 

<select ng-model="ftype"> 
    <option value="">All</option> 
    <option value="fruit">Fruit</option> 
    <option value="vegetable">Vegetable</option> 
</select> 
<div> 
    <div> 
     <div ng-repeat="elem in datas | filterCostum: fprice: ftype"> 
     {{elem}} 
     </div> 
    </div> 
    <div> 

このように呼んで

私のカスタムフィルタ

autoDrops.filter('filterCostum', function() { 
    return function (datas, fprice, ftype) { 
      console.log(ftype) 

     var options = []; 
     angular.forEach(datas, function (data) { 
       if(ftype != ""){ 
       if (data.type == ftype) { 
       if(fprice == ""){ 
            options.push(data); 

        } 
        else if(fprice == 0){ 
          if(data.price >= 0 && data.price <=24999) 
          options.push(data); 
        } 
        else if(fprice == 25000){ 
         if(data.price >= 25000 && data.price<=49999) 
         options.push(data); 
        } 
        } 
      } 
      else{ 
      console.log(fprice) 
      if(fprice == ""){ 
            options.push(data); 

        } 
        else if(fprice == 0){ 
          if(data.price >= 0 && data.price <=24999) 
          options.push(data); 
        } 
        else if(fprice == 25000){ 
         if(data.price >= 25000 && data.price<=49999) 
         options.push(data); 
        } 
        } 

      }); 

     return options; 
    } 
}) 

+0

ありがとう編集しました。それは仕事です –

関連する問題