Angluarjs с помощью кнопок для фильтрации массива

Я пытаюсь получить приложение, чтобы использовать кнопки, чтобы посмотреть на свойства рецептов в массиве и скрыть определенные рецепты на основе ограничений. Я знаю, что это, вероятно, простая проблема для опытных программистов, но я все еще участвую. Я знаю, что мой код грязный и неполный, я просто использовал его, чтобы попытаться привести свои мысли в порядок. Много заполнителей. Извиняюсь.Angluarjs с помощью кнопок для фильтрации массива

PS Если вы видели мои предыдущие вопросы, мне было поручено отказаться от этого набора фильтров и упростить приложение, чтобы вместо этого использовать ng-show/hide.

редактировать:

HTML:

<div> 
    <h2>Restrictions</h2> 
    <button ng-click="toggleNuts">Nuts</button> 
    <button ng-click="toggleWheat">Wheat</button> 

</div>

нг-повторить:

<div> 
    <h2>Restrictions</h2> 
    <button ng-click="toggleNuts">Nuts</button> 
    <button ng-click="toggleWheat">Wheat</button> 

</div>

recipe.js:

var foods = [{ 
     type: 'vegetarian', 
     name: 'recipe's name', 
     restrictions: [ 
     'nuts', 
     'dairy', 
     ], 
}]

plunker:

http://plnkr.co/edit/lCNSBlUt8X3wDT8Tsbkd?p=preview

источник

2016-01-07 Andries Gous

plunker: http://plnkr.co/edit/lCNSBlUt8X3wDT8Tsbkd –

sidenote: я пробовал много разных учебных пособий, но никто не разработал. я снял свои старые попытки и поставил вместо них заполнители. –

Что * точно * не работает? Вы не описываете свою проблему в этом вопросе; скорее вы описываете требования своей программы. Кроме того, вы не указали какой-либо код для устранения неполадок в вопросе, вместо этого вы указали в комментариях ссылку на весь ваш источник кода, что маловероятно, чтобы кто-то потратил время для подробного изучения. Я настоятельно рекомендую прочитать, как создать [mcve] и отредактировать свой вопрос. – Claies

Я отредактировал plunker: http://plnkr.co/edit/rCNaOx9JMgkwVgG9Tn3M?p=preview

Я использовал lodash librairy для обработки фильтра в моем функция переключается.

$scope.toggle = function(restriction) { 
    $scope.products = _.filter(foods, function(food) { 
     return _.includes(food.restrictions, restriction); 
    }); 
}

Я надеюсь, что это вам поможет.

источник

2016-01-07 13:24:42 FlavienBert

что меня гораздо ближе да, большое вам спасибо! однако, это нечто противоположное тому, что мне нужно. Мне нужно это, чтобы скрыть рецепты с ограничениями, соответствующими кнопкам. Кроме того, мне нужно, чтобы они могли складываться и переключаться. по существу (и я понимаю, что теперь должен был быть яснее, извинения), мне нужно, чтобы они работали как флажки. это возможно? –

@ Claies это имеет смысл? –

Мне удалось заставить его спрятаться вместо шоу, но до сих пор не повезло с переключением или укладкой –

Я выполнил ваше требование, и вы можете проверить результат здесь. Plunker

Для этого я создал новый фильтр, restrict.

.filter('restrict', function() { 
     return function(foods, filterNuts, filterWheats) { 
     var filtered = []; 
     debugger; 
     angular.forEach(foods, function(food) { 
      if(filterNuts){ 
       if (angular.lowercase(food.restrictions).indexOf("nuts") != -1) { 
       filtered.push(food); 
      } 
      } 
      if(filterWheats){ 
       if (angular.lowercase(food.restrictions).indexOf("wheat") != -1) { 
       filtered.push(food); 
      } 
      } 

     }); 
     return filtered; 
     }; 
    } 
);

И я применил этот фильтр к нашему ng-repeat в HTML,

<div class="results" ng-repeat="food in products| restrict:filterNuts:filterWheat"> </div>

Надеется, что это поможет ...

Пожалуйста, не стесняйтесь задавать какое-либо сомнение по этому вопросу! !!

источник

2016-01-11 04:12:14

Angluarjs с помощью кнопок для фильтрации массива

ответ

Смежные вопросы