javascript - using ng-repeat to print out all items sorted by different categories into rows -


so, i've managed print out items list in messy way desperately in need of refactoring

say have array of objects 

var items = [{name: "toaster", price: 10, category: "appliance"},{name: "spade", price: 5, category: "tool"},{name: "hoe", price: 5, category: "tool"},{name: "microwave", price: 10, category: "appliance"}]

using ng-repeat, print out name , price of each item row according category without having have lot of messy code. code looks similar this:

<section class="container">       <div class="row">      <h3>tool</h3>         <ul class="list-group col-lg-2 col-sm-3 col-xs-4" ng-repeat="item in ctrl.items | filter: { category:'tool'}">           <li class="list-group-item">             <p>name: {{item.name}} </p>             <p>price: £{{item.price}} </p>           </li>         </ul>       </div>   </section>        <section class="container">       <div class="row">      <h3>appliances</h3>         <ul class="list-group col-lg-2 col-sm-3 col-xs-4" ng-repeat="item in ctrl.items | filter: { category:'appliance'}">           <li class="list-group-item">             <p>name: {{item.name}} </p>             <p>price: £{{item.price}} </p>           </li>         </ul>       </div>   </section>

is there anyway make lot less messier? have presort objects different arrays in controller? or there better way use filterby method?

edit

ideally, resultant html should this

<section class="container">           <div class="row">          <h3>appliance</h3>           <ul>               <li class="list-group-item">                 <p>name: toaster </p>                 <p>price: £10</p>               </li>              <li class="list-group-item">                 <p>name: microwave</p>                 <p>price: £10</p>               </li>             </ul>             <h3>tool</h3>  <ul>               <li class="list-group-item">                 <p>name: hoe</p>                 <p>price: £5</p>               </li>              <li class="list-group-item">                 <p>name: spade</p>                 <p>price: £5</p>               </li>             </ul>            </div>       </section>

it should that

if have understood question correctly, looking want sort data according 'category' key.

for sorting purposes suppose use 'orderby' filter provided angularjs . 

<section class="container">       <div class="row">      <h3>sort category</h3>         <ul class="list-group col-lg-2 col-sm-3 col-xs-4" ng-repeat="item in ctrl.items | orderby: 'category'">           <li class="list-group-item">             <p>name: {{item.name}} </p>             <p>price: £{{item.price}} </p>           </li>         </ul>       </div>   </section>

this should trick.

for more information can refer link


Comments

Post a Comment

Popular posts from this blog

javascript - Google App Script ContentService downloadAsFile not working -

i have web app developed using google app script htmlservice , html form, populating excel sheet in google drive using spreadsheetapp . , 1 section calling contentservice download data excel file. function doget(e) { // read excel sheet //getappfile(); // render application html template return htmlservice.createtemplatefromfile('index').evaluate() .settitle('go smart') .setsandboxmode(htmlservice.sandboxmode.iframe); } function downloaddoublequatecsvfile() { var sheetid = propertiesservice.getscriptproperties().getproperty('sheetid'); var ss = spreadsheetapp.openbyid(sheetid).getactivesheet(); //var ss = spreadsheetapp.getactivespreadsheet().getactivesheet(); var maxcolumn = ss.getlastcolumn(); var maxrow = ss.getlastrow(); var data = ss.getrange(1, 1, maxrow, maxcolumn).getvalues(); if (data.length > 1) { var csv = ""; (var row = 0; row < data.length; row++) { (var c...
Read more

javascript - Function overwritting -

is there way overwrite function or event handling in function? using addeventlistener, can have many event handlers on element want var test=document.getelementbyid("div"); test.addeventlistener("click",function(){alert("im first");},false); test.addeventlistener("click",function(){alert("im second");},false); // alerts "im first" , after "im second" but if want overwrite function/event example based on client width example this function one() { alert("first"); } function two() { alert("second"); } window.onresize = function() { var test = document.getelementbyid("div"); if (window.innerwidth > 500) { test.onclick = 1 } else { test.onclick = two; } } is possible in javascript? in case use effective little known approach. addeventlistener can accept object property handleevent event handler. in case it's easy overwr...
Read more

c# - Exception when attempting to modify Dictionary -

i creating dictionary manage threads , ran exception when attempt clear dead threads after adding threads dictionary. using system; using system.collections.generic; using system.threading; namespace syscat { public class threadmanager { public static readonly threadmanager globalthreadmanager = new threadmanager( ); /// <summary> /// initializes new instance of <see cref="syscat.threadmanager"/> class. /// </summary> public threadmanager( ) { } /// <summary> /// create new threadmanager threads within basetm , deinitializes basetm /// </summary> public threadmanager( threadmanager basetm ) { this.threads = basetm.threads; basetm.threads.clear( ); } private dictionary<guid,thread> threads = new dictionary<guid, thread>( ); /// <summary> /// attempts obtain unused threadid within ...
Read more