AngularJS: как отобразить много результатов из многих флажков

Я использую AngularJS для фильтрации результатов списка вин. Вина классифицируются по цвету (красное, белое, розовое, шампанское) и другим параметрам.

Когда один цвет отмечен флажком (например, красный), появляется отфильтрованный список красного вина. Но когда выбраны два цвета, результатов не появляется (например, красный и белый).

мои пожелания:

  • Даже если отмечены красный, белый и цвет шампанского, появится список (красные, белые и шампанские вина или другие параметры). Мое главное пожелание - иметь возможность выбирать более одного параметра и отображать все отмеченные. Уметь проверять цвета, страны..

вот пример кода:

<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/

с уважением,

Стефан


checkbox filter angularjs angular-ngmodel
person Stéphane    schedule 08.06.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Попробуйте обновить фильтр следующим образом:

.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;
  }
});

ДЕМО

person Khanh TO    schedule 08.06.2014
comment
Спасибо за очень быстрый ответ!! Я только что попробовал, и это работает очень хорошо! Я пробовал часы, у меня не было успеха.... Большое спасибо, Кхань ТО!! - person Stéphane; 08.06.2014
comment
Спасибо за помощь..... Можно отфильтровать результат. Я добавил больше, если он отмечен красным и легером, появляются все записи с красным и легером, это не фильтруется. То же самое, если я проверю шампанское и легер. jsfiddle.net/stefanos/RUFdy/4 - person Stéphane; 08.06.2014
comment
@Стефан: в чем проблема? я не понимаю - person Khanh TO; 08.06.2014
comment
Мой английский не так хорош. Мое желание, например: если отмечены красный флажок и легер, будет отображаться список только с записями красного вина с параметрами легера, а не с другими записями, которые содержат слишком легер или красное. Кажется сложным установить код для фильтрации всех этих параметров. С уважением - person Stéphane; 08.06.2014
comment
Спасибо еще раз! На самом деле, если отмечены красные и крепкие вина, я бы отобразил только красные и крепкие вина. Если отмечены красное, белое и легер, я хочу видеть только красные и белые вина в списке, который содержит легер. Я хочу создать выборочный фильтр, каждый выбранный фильтр флажка будет отображать уникальную характеристику, 2 флажка выбраны 2 уникальные характеристики и т. д. ...... С уважением! - person Stéphane; 08.06.2014
comment
@Stéphane: извини, но я все еще не понимаю, что ты имеешь в виду. Можете ли вы задать это как отдельный вопрос, чтобы привлечь больше внимания других людей? В этом вопросе вы можете привести примеры, контекст... чтобы было понятнее. И это то, что вы должны делать на SO single-question-what-was" title="op меня раздражает, задавая больше вопросов, основанных на одном вопросе, который был">meta.stackoverflow.com/questions/254814/ - person Khanh TO; 08.06.2014
comment
Привет Хан То, спасибо за совет. Задам отдельным вопросом, и проясню!! - person Stéphane; 08.06.2014
comment
мой новый вопрос: stackoverflow.com/questions/24107781/ - person Stéphane; 08.06.2014
comment
Из-за вашего совета, чтобы было понятнее, дайте мне очень хороший результат! В очередной раз благодарим за помощь! - person Stéphane; 08.06.2014