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> 

Popular posts from this blog

c# - ODP.NET Oracle.ManagedDataAccess causes ORA-12537 network session end of file -

matlab - Compression and Decompression of ECG Signal using HUFFMAN ALGORITHM -

utf 8 - split utf-8 string into bytes in python -