Filter by city/category/subcategory (3 levels)

[Bruno Carvalho]

Hello everyone.

I'm new in the world of angularjs and ventured in app design of individual commercial region. Basically are some cities where every city has some categories and each category has some subcategories. Within the subcategories there will be a list of advertisers.

The navigation flow is as follows: The user clicks on the desired city, then click the category, then the subcategory, then the advertiser, displaying the relevant information to the desired advertiser. There will be 4 different views.

My problem is, as do the filtering that way? I've read some articles about angularjs, but found nothing instead filtering on two levels.

I am using static information for now, as follows:

var cities = [

{ name: "City1", desc:"Description", img: "http://placehold.it/550x250"},

{ name: "City2", desc:"Description", img: "http://placehold.it/550x250"},

{ name: "City3", desc:"Description", img: "http://placehold.it/550x250"},

{ name: "City4", desc:"Description", img: "http://placehold.it/550x250"}

];

var categories = [

{ name: "Category1", img: "http://placehold.it/150x150"},

{ name: "Category2", img: "http://placehold.it/150x150"},

{ name: "Category3", img: "http://placehold.it/150x150"},

{ name: "Category4", img: "http://placehold.it/150x150"}

];

var subcategories = [

{ name: "Subcategory1", img: "http://placehold.it/150x150"},

{ name: "Subcategory2", img: "http://placehold.it/150x150"},

{ name: "Subcategory3", img: "http://placehold.it/150x150"},

{ name: "Subcategory4", img: "http://placehold.it/150x150"}

];

var advertisers = [

{ name: "Advertiser1", desc:"Description", city:"City1", category: "Category3", subcategory: "Subcategory4"},

{ name: "Advertiser2", desc:"Description", city:"City4", category: "Category1", subcategory: "Subcategory3"},

{ name: "Advertiser3", desc:"Description", city:"City2", category: "Category4", subcategory: "Subcategory1"},

{ name: "Advertiser4", desc:"Description", city:"City3", category: "Category2", subcategory: "Subcategory2"}

];

I don't know how to proceed, if I should create directives or custom filters or whatever that.

I hope someone can help me, because I have no idea :|.

Thanks!

[Lorenzo Bugiani]

First of all, on your data there aren't relationship between cities/category/subcategory, so I cannot figure out how to show correct category after selecting a city (and so on), so I've made a little example that doesn't take care of this behaviuor.

Here it is the example:

http://plnkr.co/edit/16unNtOvSA7IZx6Dmiwz?p=preview

Basically, you have to set the ng-model of the three selects on the correct property of the same object.

Those properties have to be named with the correspondly name of the property on advertiser object, to let the filter run correctly.

EX: the city filter have to filter advertisers by city, so since the city property is name "city" on avertiser, the code is
<select ng-model="filters.city" ng-options="city.name as city.name for city in cities"></select>

(obv, do the same for other selects) 

After that, you can display all your advertisers in an ng-repeat, filtered by user selection. The code is:

<div ng-repeat="advertise in advertisers | filter: filters">
      {{advertise.name}}
</div> 

Since filters is an object and it have its properties named as the properties of advertiser, as the doc say:

Object: A pattern object can be used to filter specific properties on objects contained byarray. For example {name:"M", phone:"1"} predicate will return an array of items which have property name containing "M" and property phone containing "1". A special property name $ can be used (as in {$:"text"}) to accept a match against any property of the object. That's equivalent to the simple substring match with a string as described above. The predicate can be negated by prefixing the string with !. For Example {name: "!M"} predicate will return an array of items which have propertyname not containing "M".

 

Now, what remains is:

1. model the relationship between city/category/subcatergory
2. eventually show advertiser only when all selects are selected

bye

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[Bruno Carvalho]

Thanks for replay.

I made a file with what I want is the filter.

http://plnkr.co/edit/5glINlEA03FAy5oXeEKn?p=preview

If you can help with any ideas, I will be grateful.

[Lorenzo Bugiani]

Uhm wait.

I haven't understand what are the relationships between cities, categories and subcategories. How you can determine, for example, what categories belongs to a city? Category objects, for ex, need to have a property that indicate what is its city.

Then, I think doing what you what using router is very difficult (or maybe tricky). I think you have to use ui-router instead of router, or search about a wizard module, create your own or do everything in a unique controller (or service or whatever you want).

Finally, the point is always the same. City, category and subcategory chosen by the user have to "saved" in an object, that you can use to select the correct list of advertisers (for example by a simple filter, as I've do in my example).

--

[Bruno Carvalho]

The categories are the same for all cities. I confess I am racking my brain on how to make the relationship between all data.

I think the ui-router will be the best solution. I'm trying to adapt this example https://github.com/rclayton/NG-Communicate-Ctrls/tree/master/router but I'm a little difficult because of the way that the data are in json.

That was the example that came closer than need.