I have 30 categories in mysql. I have 450 subcategories which are related to the 30 categories in another table.
Categories table
id _ title _ Keywords
1 _ Animals _ animal, animals, pet, parrot
2 _ Books _ books, book, educational
n _ xxx _ xxx
Subcategories table
id _ ref _ title _ keywords
1 _ 1 _ cats _ cats, persian cat, bengal cat
2 _ 1 _ dogs _ dogs, labrador, golder retriver
3 _ 2 _ Classic _ The davinci code, books, book, classical books
I need to implement the filter to a textfield. If the users enters labrador in the textfield then show the categories or/and subcategories which contain 'labrador' in the keywords. In this case the "dogs" subcategory would appear!
I know that this has been done using jquery. But is there anyway to implement this with angularJs? If you got a jsfiddle then it would be awesome! :) Thank you
This fiddle may help you get started. Try typing in 'labrador' in the textbox and notice the second drop down only shows dogs. If you type in 'persian' the second drop down only shows cats.
Most of the work is happening in the subcategory select filter in ng-options:
<select ng-model="selectedSubCategory" ng-options="c.title for c in subcategories | filter:{ref: selectedCategory.id, keywords:keyword}"></select>
The filter filter allows you to limit the bound array by multiple fields. In this example it is filtering by two things:
ref on subcategories based on the selectedCategory in the first select drop down. This by itself displays only the subcategories matching the category currently selected.keywords on subcategories based on the keyword typed into the input textbox. This means as you type something into the textbox the value is being updated in the $scope.keyword model and automatically filtering subcategories for any keywords that contain the text typed in.Update: after seeing bfricka's take I may have misunderstood your question. I tweaked the fiddle and added allCategories to the model combining categories and subcategories and a filter only against the keyword typed in displaying the results in the ng-repeat:
<div ng-repeat="c in allCategories | filter:{keywords:keyword}">{{c}}</div>
I sort of chose a different path. This just modifies the model using some underscore filters. It's kinda rough, but it could be a good place to start.