Is angularjs capable of filtering based on keywords?

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


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.

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:, 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:

  1. The 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.
  2. The 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>

Need Your Help

Why does Git insist that a file has been modified even after a `git checkout --`?

git line-endings

I made a change to a couple of files locally, without committing them. git status shows:

Toggle Tree List Branches in Backone and Marionette

javascript jquery backbone.js marionette

I have a nested Tree list using Backone and Marionette. I would like to toggle the view of each Branch that has a leaf by clicking on the branch li.