Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript: Angular 2, AngularJS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.50/6: Рейтинг темы: голосов - 6, средняя оценка - 4.50
Kiruxa
28 / 28 / 12
Регистрация: 31.01.2011
Сообщений: 311
1

Фильтр на Angular

20.09.2016, 20:39. Просмотров 999. Ответов 3
Метки нет (Все метки)

Всем привет!
Пытаюсь сделать фильтр по категориям товаром. Не получается отфильтровать и вывести отфильтрованные товары. Помогите плиз с выводом нового массива. Пробую сначала просто отфильтровать по возрастной категории (потом сделаю универсальную функцию). Делаю так:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div ng-app = "myapp">
<div ng-controller="Catalog">
<h2>Список товаров</h2>
 
                <div class="filter-wrap">
                    <span ng-click="sort('adult')" class="filter__item">Взрослый</span>
                    <span ng-click="sort('child')" class="filter__item">Детский</span>
                    <span ng-click="sort(3)" class="filter__item">Трехколесный</span>
                    <span ng-click="sort(2)" class="filter__item">Двухколесный</span>
                </div>
 
                <div class="catalog-wrap">
                    <div class="catalog-inner">
                        <div class="catalog__item" ng-repeat="catItem in catItems">
                            <div class="item__img-wrap"><img src="{{catItem.src}}" alt="" class="item__img"></div>
                            <div class="item__title">{{catItem.title}}</div>
                            <div class="item__price">{{catItem.price}}</div>
                            <div class="item__age">Категория: {{catItem.age}}</div>
                            <div class="item__wheel">Количество колес: {{catItem.wheel}}</div>
                        </div>
                     </div>
                </div>
</div>
</div>
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
'use strict';
 
var myApp = angular.module("myapp", []);
 
    myApp.controller("Catalog", function($scope) {
        $scope.catItems = [
            {'title':'Schwinn Cruiser',
                'src':'img/catalog/velo/velo1.jpg',
                'price':17500,
            'age':'adult',
            'wheel':2},
            {'title':'First Road Rike',
                'src':'img/catalog/velo/velo2.jpg',
                'price':25700,
                'age':'adult',
                'wheel':2},
            {'title':'Suntour',
                'src':'img/catalog/velo/velo3.jpg',
                'price':18500,
                'age':'adult',
                'wheel':2}
        ];
 
 
        $scope.sort = function(propItem){
 
            for(var key in $scope.catItems){
                var item  = $scope.catItems[key],
                    itemVal = [];
 
                if(item.age === propItem){
                    itemVal.push(item)
                }
                console.log(itemVal)
            }
console.log(catItem) - пишет undef
        }
 
    });
0
Лучшие ответы (1)
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
20.09.2016, 20:39
Ответы с готовыми решениями:

Angular 2
Добрый день Делаю все в среде IntelliJ Idea. Прикрепила к письму 2 файла....

Azure Angular JS
Здраствуйте ребята срочно нужна ваша помощь .... У меня есть проект на Angulare...

Роутинг в Angular
Собственно, делаю проект на Angular 4. есть index.html, где в &lt;body&gt; прописан...

Компонент в Angular 1.5
Делаю компонент. app.component('changer', { templateUrl: 'changer.html', ...

Angular css
Здраствуйте всем у меня есть проект на angulare ... НО на локалке он не...

3
Angry_n_Hungry
19 / 19 / 12
Регистрация: 03.10.2016
Сообщений: 107
03.10.2016, 07:57 2
Лучший ответ Сообщение было отмечено Kiruxa как решение

Решение

С каких пор для массивов используют for(key in)? .forEach сломался чтоль?
Javascript
1
2
3
4
5
6
$scope.filtered = [];
$scope.catItems.forEach(function(item){
if(item.age == 'punk') {
$scope.filtered.push(item);
}
})
0
Kiruxa
28 / 28 / 12
Регистрация: 31.01.2011
Сообщений: 311
03.10.2016, 12:49  [ТС] 3
Цитата Сообщение от Angry_n_Hungry Посмотреть сообщение
С каких пор для массивов используют for(key in)? .forEach сломался чтоль?
Javascript
Выделить код
1
2
3
4
5
6
$scope.filtered = [];
$scope.catItems.forEach(function(item){
if(item.age == 'punk') {
$scope.filtered.push(item);
}
})
Вы правы, благодарю. Все получилось!)
0
Мотороллер
431 / 242 / 43
Регистрация: 05.08.2013
Сообщений: 1,661
Завершенные тесты: 1
09.10.2016, 12:35 4
Цитата Сообщение от Angry_n_Hungry Посмотреть сообщение
.forEach сломался чтоль?
Сломался в пользу for (value of array)
0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
09.10.2016, 12:35

Angular 2 setup
Добрый день! Обращаюсь к Вам с вопросом о том, как написать &quot;Hello world&quot; на...

Angular и seo
Смогут ли поиковые боты на сегоняшний день индекировать приложение написанное...

Angular ngBindHtml
Добрый день такой вопрос как сделать чтобы, между &lt;div...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru