javascript - Angular.js paginate filtered data and display total items without duplicating code in view/controller -

-

let's have filter implemented in view this:

<input data-ng-model="statementfilter" /> <ul>     <li data-ng-repeat="statement in statements | filter: statementfilter">         {{ statement.name }}     </li> </ul>

this case insensitive partial match statements properties contain statementfilter.

i need implement in controller instead of in view. understand can create custom filters in angular, want filter generic case insensitive partial matching on complex object built-in angular filter in view does. if create custom filter, have filtering using javascript require library afaik.

how can leverage generic case insensitive partial matching comes angular's "view" filter in code?

thanks

update

here plunker of i'm trying do.

solution: http://plnkr.co/edit/acap437ojgmgmugctxt3?p=preview

basically, problem controller doing knew accomplished inside of view... made more difficult other cases you're trying paginate same data you're filtering , displaying length... means data must manipulated in order:

  1. filtered data based on search item
  2. capture length of filtered items
  3. paginate filtered items , display

the first thing know had done rework ng-repeat filtering. goal use build in angular filtering.

originally, looked this. did filtering , paging, used custom code in controller.

data-ng-repeat="statement in pagedstatementdata()"

step 1: use angular filter

the filtering posted in question easier way without writing custom filtering code... first step. easy enough.

data-ng-repeat="statement in statements | filter:statementfilter"

step 2: pagination back

at point, list filtered correctly, displays of filtered items , not break them pages. pagination buttons work should , total records update accordingly. next step insert pagination filtered list.

in script, added begin , end scope. these variables created inside of pagedstatementdata(). using values, can slice filtered array pagination going.

note: this $scope.begin $scope.end code removed in step 5, because it's calculated on initial render , didn't update after then. bug didn't notice until step 5.

$scope.begin = ($scope.currentpage-1)*$scope.numperpage; $scope.end = ($scope.begin + $scope.numperpage); data-ng-repeat="statement in (statements | filter:statementfilter).slice(begin, end)"

step 3: remove controller code not wanted/needed

at point, works... goal remove custom filtering code... removed $scope.filteredstatementdata method , $scope.totalfilteredstatementitems method called it. $scope.pagedstatementdata can deleted also.. called in ng-repeat modified in step 1.

removed:

  • $scope.filteredstatementdata // custom filter code.. removed
  • $scope.totalfilteredstatementitems // called filteredstatementdata... removed
  • $scope.pagedstatementdata // called original ng-repeat... removed

step 4: fix total items # , pagination buttons. both depend on same .length

at point... view broken, because it's still making few calls methods removed. (totalfilteredstatementitems) goal replace functionality have in view. totalfilteredstatementitems used run custom filtering logic , got length without paginating data.

we have items being filtered, need save them scope (before they're paginated) can accessed elsewhere. can save filtered array inside of ng-repeat, actually. long syntax remains item in items... items can assigned scope variable... item in (items = (/*filter*/)).slice(x,y) 

data-ng-repeat="statement in (filtereditems = (statements | filter:statementfilter)).slice(being, end)"     <div>total records: {{ filtereditems.length }}</div> <pagination data-ng-model="currentpage" total-items="filtereditems.length"

okay. ng-repeat starting crazy, it's still working. parens real magic here. code executed in desired order.

// filtered data based on search item $scope.filtereditems = $scope.statements.filter(/*statementfilter magic*/); // paginate filtered items var _temp = filtereditems.slice($scope.begin, $scope.end),     _i, statement; // display page of filtered items (var _i in _temp) {     statement = _temp[_i];     // render each row w/ statement }

also, i'm sure there's angular $scope magic going on update filtereditems.length since it's used in total records: div before list filtered... angular! or maybe prioritizes ng-repeat , executes block first. idk. works.

step 5: pagination broken. pagination component update begin , end variables list depends on.

deleted $scope.begin , $scope.end code in controller. create them inside of ng-init when component first created, , on data-ng-change event, recalculate values.

<pagination data-ng-model="currentpage" total-items="filtereditems.length"     items-per-page="numperpage" data-max-size="maxsize" data-boundary-links="true"     ng-init="begin = (currentpage-1)*numperpage; end = begin + numperpage"     data-ng-change="begin = (currentpage-1)*numperpage; end = begin + numperpage">

Comments

Post a Comment

Popular posts from this blog

python - mat is not a numerical tuple : openCV error -

-
i have write down code showing error ma not getting it: please help: showing mat not numerical tuple: import cv import cv2 capture = cv2.videocapture("j.3gp") while(1): _, frame1 = capture.read() grayimage1 = cv2.cvtcolor(frame1, cv2.color_bgr2gray) _, frame2 = capture.read() grayimage2 = cv2.cvtcolor(frame2, cv2.color_bgr2gray) differenceimage = cv2.absdiff(grayimage1,grayimage2) thresholdimage = cv2.threshold(differenceimage,25,255,cv2.thresh_binary) cv2.imshow("difference image", differenceimage) cv2.imshow("threshold image", thresholdimage) cv2.imshow("image", frame1) k = cv2.waitkey(30) & 0xff error arising : ----------------------------------------------------------------------------------------- traceback (most recent call last): file "desk.py", line 15, in <module> cv2.imshow("threshold image", thresholdimage) typeerror: mat not numerical tuple
Read more

c# - MSAA finds controls UI Automation doesn't -

-
i'm working on automating windows application. i'm using teststack white framework. i've hit problem. program has 'window' object cannot see inside of. white shows no controls inside of it. inspect.exe shows no controls inside of either when running in ui automation mode. if switch inspect msaa see controls inside fine. there anyway me use msaa c# handle on these controls? if can identify msaa functions need, can use p/invoke call them c#. here's example article doing msaa: http://www.codeproject.com/articles/38906/ui-automation-using-microsoft-active-accessibility also, pinvoke.net can used identify iaccessible (msaa) functions: http://www.pinvoke.net/search.aspx?search=iaccessible&namespace=[all] here's answer along lines: msaa com-based? finally, alternative p/invoke, might able use tlbimp.exe create wrapper assembly oleacc.dll, , access msaa functions through it. i'm not sure if works msaa, it's worth try. as e
Read more

wordpress - .htaccess: RewriteRule: bad flag delimiters -

-
pulling hair out on one. have following .htaccess file custom redirects in addition wordpress's default settings. when tested on local wamp server worked fine after moving production i'm not getting rewriterule: bad flag delimiters error in server log , after while site goes down internal server error any appreciated. in advance! <ifmodule mod_rewrite.c> rewriteengine on rewritebase / rewriterule ^rockford_weddings___welcome\.html$ /wedding/ [r=301,l] rewriterule ^blog/?$ /journal/ [r=301,l] rewriterule ^blog/(.*)$ /$1 [r=301,l] rewriterule ^portraitinvestment/?$ /portraitinvestment\.pdf [r=301,l] rewriterule ^weddinginvestment/?$ /weddinginvestment\.pdf [r=301,l] rewriterule ^holidaycards2014/?$ /holidaycards2014\.pdf [r=301,l] </ifmodule> # begin wordpress <ifmodule mod_rewrite.c> rewriteengine on rewritebase / rewriterule ^index\.php$ - [l] rewritecond %{request_filename} !-f rewritecond %{request_filename} !-d rewriterule . /index.php [l] </
Read more