AngularJS filtering on categories -

-

i started playing angularjs earlier today , decided build simple app consists of categories containing items.

the app has sidebar categories listed (aside.navigation) , main view items listed. plan load items ($scope.items) <ul> , filter them when user clicks on 1 of categories in sidebar.

i tried couple of things, including simple filter withing html, , custom filter function. can't work. best way this?

this html

<html ng-app="stash">     ...     <body ng-controller="stashctrl">         <div id="stash">             <aside class="navigation">                 <h1 class="logo"><a href="#"><strong>stash</strong>.io</a></h1>                 <ul>                     <li class="icon-latest active"><a href="#">latest</a></li>                     <li class="icon-star"><a href="#">favorites</a></li>                 </ul>                 <ul>                     <li ng-repeat="stash in stashes" class="icon-{{stash.icon}}"><a href="#">{{stash.title}}</a></li>                 </ul>             </aside>              <section class="content">                 <header>                     <h1>inbox <span class="item-count">{{totalitems}}</span></h1>                 </header>                 <ul class="items clearfix">                     <li ng-repeat="item in items | filter:search">                         <a ng-if="item.image != ''" href="#" class="has-image" ng-style="{'background-image': 'url({{item.image}})'}">                             <h2>{{item.title}}</h2>                         </a>                         <a ng-if="item.excerpt != ''" href="#">                             <h2>{{item.title}}</h2>                             <p>{{item.excerpt}}</p>                         </a>                         <a ng-if="item.image == '' && item.excerpt == ''" href="#">                             <h2>{{item.title}}</h2>                         </a>                     </li>                 </ul>             </section>         </div>     </body>     ... </html>

and javascript

var app = angular.module('stash', []);  app.controller('stashctrl', function($scope) {     $scope.items = [         {id: '1', stash: '1', title: 'lorem ipsum dolor sit amet, consectetur adipisicing elit', excerpt: '', image: 'images/portfolio1.jpg'},         {id: '2', stash: '1', title: 'lorem ipsum', excerpt: '', image: 'images/portfolio4.jpg'},         {id: '3', stash: '1', title: 'lorem ipsum dolor sit amet', excerpt: 'lorem ipsum dolor sit amet, consectetur adipisicing elit. inventore, autem, repellat, asperiores, voluptates doloremque eaque suscipit beatae quisquam sint consequuntur illo minus ipsum optio officia alias ex veritatis libero veniam tempora fugit laborum facere vitae doloribus omnis aspernatur corporis rerum ad repudiandae accusamus placeat. officia, aliquam, laborum sequi minima saepe et voluptatem! consequuntur maiores veniam laboriosam quaerat quae delectus doloremque rem cumque aspernatur! tenetur, beatae facere incidunt quae numquam vitae exercitationem quia saepe earum officiis porro asperiores id explicabo sapiente molestiae culpa atque facilis ipsa eligendi nobis quas eaque possimus temporibus nam mollitia distinctio dicta dolores. expedita, quas aliquid modi!', image: ''},         {id: '4', stash: '2', title: 'lorem ipsum', excerpt: '', image: 'images/portfolio2.jpg'},         {id: '5', stash: '', title: '5', excerpt: '', image: ''}     ];     $scope.totalitems = $scope.items.length;      $scope.stashes = [         {id: '1', title: 'ideas', icon: 'lightbulb'},         {id: '2', title: 'onefinity studios', icon: 'company'},         {id: '3', title: 'onefinitycms', icon: 'star'}     ]; });

the easiest solution set search object:

$scope.search = {};

and change stash id on click in stash list:

<a href ng-click="search.stash = stash.id">{{stash.title}}</a>

here working demo.

if want active state use ng-class , place on li:

<li ng-repeat="stash in stashes" ng-class="{'active': stash.id == search.stash}">...</li>

Comments

Post a Comment

Popular posts from this blog

c++ - How to add Crypto++ library to Qt project -

-
Image
i downloaded crypto++ source , compiled cryptlib project in visual studio 2013, , added generated .lib file qt project, made .pro file this: qt += core gui qt += sql greaterthan(qt_major_version, 4):qt += widgets target = untitled template = app sources += main.cpp\ mainwindow.cpp headers += mainwindow.h \ databasecontrol.h \ test.h forms += mainwindow.ui win32:config(release, debug|release): libs += -l$$pwd/ -lcryptlib else:win32:config(debug, debug|release): libs += -l$$pwd/ -lcryptlibd else:unix: libs += -l$$pwd/ -lcryptlib includepath += $$pwd/ dependpath += $$pwd/ win32-g++:config(release, debug|release): pre_targetdeps += $$pwd/libcryptlib.a else:win32-g++:config(debug, debug|release): pre_targetdeps += $$pwd/libcryptlibd.a else:win32:!win32-g++:config(release, debug|release): pre_targetdeps += $$pwd/cryptlib.lib else:win32:!win32-g++:config(debug, debug|release): pre_targetdeps += $$pwd/cryptlibd.lib else:unix: pre_targetdeps += $$pw
Read more

jQuery Mobile app not scrolling in Firefox -

-
i have mobile app built in jquery mobile. scrolling fine in chrome & safari, fails scroll in firefox on desktop. have other instances of same app, different features, , works across browsers. life of me, cannot figure this, please help! located here: http://re-brand.us/dsus/index.html seems bug in firefox: bug log . able scroll using keyboard not trackpad on mac. are using mac? i'll keep looking see if can find way around it.
Read more

How to use vim as editor in Matlab GUI -

-
i using matlab r2013b. using gui, command windows , editor in split screen. in matlab preferences > editor/debugger > editor. there option set custom editor instead of matlab editor. set local editor /usr/bin/vim , not able open files @ anymore. there possibility use vim editor in split screen mode? i aware of !vim file.m , not solution looking for, works satisfactory in -nodisplay mode. rather want keep split screen mode. i did not find solution 100% satisfying, using tmux intermediate solution. allows 2 use split screen 2 terminals. in 1 of can open matlab -nodesktop in terminal mode, , in other 1 vim . possible switch between both split screens. you can use functionality of gui matlab typing things commandhistory , who et cetera.
Read more