javascript - Nesting ng-repeat on one element for filtering -
i have page built of tiles (imagine list of div's thumbnail , title) - each 'tile' can have several tags attributed them..
e.g:
- tile 1 has following tags:
foo
,bar
,baz
,quz
- tile 2 has following tags:
foo
,bar
,baz
- tile 3 has following tags:
bar
,baz
- tile 4 has following tags:
baz
,quz
.. , on..
at top of page there simple filter menu - each tag clickable in list.
when clicking tag in filter menu e.g. foo
, hide tile hasn't got foo
tag attributed it. in case, tiles 3 , 4 removed view.
each tile has following template, need extend incorporate tag filtering...
<div ng-repeat="tile in tiles" class="col-md-2" ng-show="showfiles.filters[tile.filetype]"> <div class="sc-file-container"> <h3>{{tile.name}}</h3> // add image here </div> </div>
very new angular way, in order use ng-hide/ng-show i've been creating arrays in controller $scope
- see above, when showfiles.filters['tile.filetype'] set true (by onclick via directive on filter menu example), tile show or hide..
question: there potentially several tags attributed each tile - best way utilise ng-show
in above example? how can iterate on tags array - keep within <div>
? possible have 2 ng-repeat
's on 1 element or have create several dummy <div>
wrappers, apply example ng-show="filterbytag['foo']"
tile
example of json:
"tiles" : { .. . "filetype" : "pdf", "name" : "this tile 1!", .. "tags":[ { "id":1, "name":"foo" }, { "id":2, "name":"bar" }, { "id":3, "name":"baz" } .. ] .. }
better way in angular filter tiles array based on selected tag filter.
<div ng-repeat="tile in filteredtiles" class="col-md-2"> <div class="sc-file-container"> <h3>{{tile.name}}</h3> // add image here </div> </div> <script> var filteredtiles = []; // logic filter tiles based on selected tag in filter </script>