1

AngularJS を使用して、ワインのリストの結果をフィルタリングしています。ワインは、色 (赤、白、ロゼ、シャンパン) およびその他のパラメーターによって分類されます。

チェックボックスで 1 つの色 (たとえば赤) をオンにすると、フィルター処理された赤ワインのリストが表示されます。ただし、2 つの色を選択すると、結果は表示されません (たとえば、赤と白)。

私の願い：

  • 赤、白、シャンパンの色がチェックされている場合でも、(赤、白、シャンパンのワイン、またはその他のパラメーター) のリストが表示されます。私の主な願いは、複数のパラメーターを選択し、チェックされたものをすべて表示できるようにすることです。色、国を確認できます..

ここにコード例:

<div ng-controller="MainCtrl">

<input ng-model="characteristics.red" type="checkbox" >red</input>
<input ng-model="characteristics.white" type="checkbox" >white</input>
<input ng-model="characteristics.rose" type="checkbox" >rose</input>
<input ng-model="characteristics.champagne" type="checkbox" >champagne</input>
    <br><br>

<div ng-repeat="wine in filtered= (wines |filteredstoves:characteristics) |       filteredstoves:characteristics">

    {{wine.name}} - {{wine.characteristics}}
        </div>
    <br><br>
     Filtered list has {{filtered.length}} items
</div>

コードのデモ: http://jsfiddle.net/stefanos/kTYdd/26/

よろしく、

ステファン

4

1 に答える 1

1

次のようにフィルターを更新してみてください。

.filter('filteredstoves', function() {
  return function(stoves, characteristics) {
    var result = []; 
    angular.forEach(characteristics, function(value, key) {
      if(value) {
        for(var index = 0; index < stoves.length; index++) {
          var wine = stoves[index];
          if(wine.characteristics.indexOf(key) >= 0) {
            if (result.indexOf(wine) === -1){
                result.push(wine);
            }
          }
        }
      }
    });
    return result;
  }
});

デモ

于 2014-06-08T02:08:20.657 に答える