Угловой JS фильтр обзор по массиву категорий

Что я пытаюсь сделать, это создать обзор, который можно отфильтровать на основе категорий, вложенных в массив объектов JSON.Угловой JS фильтр обзор по массиву категорий

JSON из элементов, которые я хочу, чтобы создать представление о том, будет выглядеть примерно так:

{ 
    id: 1, 
    title: "title", 
    content: "content", 
    categories: [{ 
     title: "cat1", 
     descripton: "desc" 
    }, 
    { 
     title: "cat2", 
     descripton: "desc" 
    }] 
}, 
{ 
    id: 2, 
    title: "title", 
    content: "content", 
    categories: [{ 
     title: "cat3", 
     descripton: "desc" 
    }, 
    { 
     title: "cat4", 
     descripton: "desc" 
    }] 
}

HTML, выглядит примерно так:

<select ng-model="catselect"> 
    <option>cat1</option> 
    <option>cat2</option> 
    <option>cat3</option> 
    <option>cat4</option> 
</select> 
<ul> 
    <li ng-repeat="item in array | filter: {ARRAY OF CATEGORIES: catselect}"> 

    </li> 
</ul>

В настоящее время у меня нет понятия, как к заставить это работать. Я думаю, что наиболее очевидное решение должно было быть похоже на filter: {categories.title: catselect}, но, видимо, это не так. Насколько я знаю, никаких других вопросов по Stackoverflow решить эту проблему. Мне очень интересно, может ли кто-нибудь помочь мне.

источник

2016-07-27 Frank Kluytmans

Вы можете попробовать это, чтобы узнать, работает ли оно? Я действительно не проверял его.

filter: { categories: { title: catselect } }

источник

2016-07-27 15:05:58

Спасибо за беспокойство! Это решение не получилось :( –

Попробуйте варианты моего ответа: filter: {categories: {title: catselect}} или другие, это действительно сработало для меня, когда у меня есть объект внутри моего объекта, массив внутри объекта .. –

Это действительно работает! :) Можете ли вы отредактировать свой ответ, чтобы я мог его принять? –

Пользовательский фильтр будет работать

angular.module("app", []) 
 
    .controller("test", function($scope) { 
 

 
    $scope.array = [{ 
 
     id: 1, 
 
     title: "title", 
 
     content: "content", 
 
     categories: [{ 
 
     title: "cat1", 
 
     descripton: "desc" 
 
     }, { 
 
     title: "cat2", 
 
     descripton: "desc" 
 
     }] 
 
    }, { 
 
     id: 2, 
 
     title: "title2", 
 
     content: "content", 
 
     categories: [{ 
 
     title: "cat3", 
 
     descripton: "desc" 
 
     }, { 
 
     title: "cat4", 
 
     descripton: "desc" 
 
     }] 
 
    }] 
 
    }) 
 
    .filter("filterByCat", function() { 
 
    return function(input, catselect) { 
 
     if (catselect != undefined) { 
 
     var f = [] 
 
     angular.forEach(input, function(el) { 
 
      if ((el.categories.filter(function(cat) { 
 
      return cat.title == catselect 
 
      })).length > 0) f.push(el); 
 
     }) 
 
     return f; 
 
     } else { 
 
     return input; 
 
     } 
 
    } 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="test"> 
 
    <select ng-model="catselect"> 
 
    <option>cat1</option> 
 
    <option>cat2</option> 
 
    <option>cat3</option> 
 
    <option>cat4</option> 
 
    </select> 
 
    <ul> 
 
    <li ng-repeat="item in array | filterByCat:catselect">{{item.title}}</li> 
 
    </ul> 
 
</div>

источник

2016-07-27 15:11:39 Vanojx1

Угловой JS фильтр обзор по массиву категорий

ответ

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