0

I have a form that has a search box and a filter box that narrows down results. Data is divided into and shown in 3 groups (each group corresponds to the filter). Under each group is columns of data (string) that matches what's typed in the search box (blank shows all and what doesn't match is hidden).

Now, 1) the iteration goes vertically in alphabetical order. First column fills up then goes to second column and so on. 2) requires columns to respond to window resizing. So smaller window = less columns and larger window = more columns...

I'm using ng-repeat on these and pre-filtering/pre-formatting all results in the controller, based on search/filter/resize events then I'm passing 2-dimensional arrays into the view(html).

Is there a better approach? I looked up numerous questions on ng-repeat and they mostly point to preformatting in the controller. What those don't account for, however, is column resizing on top of that. I DID implement this and it's kinda slow.

Thanks for reading this and hope to get some tips.

ThomasS
  • 705
  • 1
  • 11
  • 30
Mike
  • 149
  • 2
  • 13

1 Answers1

0

I can not give you a complete answer on this one (yet) i'll have to search a bit myself. But what you can try is using the columns property in css.

For example you use:

angular.module("myapp", [])
  .controller('testctrl', function($scope) {
    $scope.list = ['test', 'test2', 'foo', 'bar', 'fus', 'ro', 'dah'];
  });
ul {
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<ul ng-app="myapp" ng-controller="testctrl">
  <li ng-repeat="result in list">{{result}}</li>
</ul>

On the amounts of columns for window size, this you can change using javascript and manipulate the number behind columns

ThomasS
  • 705
  • 1
  • 11
  • 30
  • Interesting.. thanks for your input. Let me try and let you know. – Mike May 27 '16 at 00:45
  • things look promising I can resize way faster and don't have to do bulky calculations, but I have one problem. As this is happening inside a controller, in the beginning, I do not have acces to complete ready DOM, which means after I get data from server and try to set the column in CSS, ng-repeat hasn't run yet so I can't set the column-count in
      . However, after everything initially loads (only 1 column) and I resize, then things go into multiple columns as expected. What should I do next?
     – Mike May 27 '16 at 06:33
  • what you can do to fix that issue is use some javascript to change the `ul:{column}` value in css in the `.then()` or the `.succes()` of your http request. Create a function that will determine the height and width of your screen and the length of your array and by that determine the max amount of rows before you reach the end of your page and the max amount of columns. You will have to think about what to do if all the data can not be shown on 1 page tho. If i find the time ill try out something but your should have enough to do some experimenting :D – ThomasS May 27 '16 at 14:07
  • That's what I'm doing right now but when I debug, $(jQuery) on css returns [] so I cannot grab the element. Right now, it's in a controller and I'm reading from docs that I shouldn't do any DOM manipulation in the controller. Is there even a way to access stable DOM in the controller? – Mike May 27 '16 at 18:29
  • 1
    Woo.. Got it! I put the function where I'm setting the CSS column in the setTimeout() and it works!! – Mike May 27 '16 at 20:02
  • For those whom this helps, you're most likely gonna run into column fill-over problem next. This helped for me. http://stackoverflow.com/questions/5314726/css-multi-column-layout-of-list-items-doesnt-align-properly-in-chrome – Mike Jun 01 '16 at 10:19