After utilizing ng-repeat to display some JSON data, I have incorporated form controls to filter output data from another JSON file.
Here is a simplified example:
First JSON data:
var technologies = [
{"id":"5", "slug":"mysql", "label":"MySQL", "category":"database"},
{"id":"4", "slug":"html", "label":"HTML", "category":"markup"}
]
Output:
<ul>
<li ng-repeat="tech in technologies">
<span>{{tech.label}}</span>
<span><label>required expertise
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select></label>
</span>
</li>
</ul>
(The filtered technologies are based on user choices made on a previous page.)
The second JSON includes the 'expertise' property that will be used for filtering:
var people = [
{
'label': 'MySQL',
'slug': 'mysql',
'talents':[
{
'name': 'Stanislav Lem',
'expertise': 5,
'desire': 0,
'last_used': '2009-01'
},
{
'name': 'Ijon Tichy',
'expertise': 1,
'desire': 5,
'last_used': '2011-06'
}
]
}, ...
]
This data is currently displayed as follows:
<ul>
<li ng-repeat="item in people">
{{item.label}}<br>
<ul>
<li ng-repeat="person in item.talents">{{person.name}} · Expertise: {{person.expertise}}</li>
</ul>
</li>
</ul>
I am seeking a filter that can utilize the options from the first output to filter the second output. For instance, if MySQL's required expertise is set to '2', only Stanislav Lem should be displayed. I also plan to implement a 'no results found' message if there are no matches for expertise levels.
Check out the Plunker sample here: http://plnkr.co/edit/B0aQp9aCJ2g4OM6fZ3qe?p=preview