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 2014-12-03 15:40 GMT+01:00 Bruno Carvalho <[email protected]>: > 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! > > -- > 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 [email protected]. > To post to this group, send email to [email protected]. > Visit this group at http://groups.google.com/group/angular. > For more options, visit https://groups.google.com/d/optout. > -- 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 [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/angular. For more options, visit https://groups.google.com/d/optout.
