AngularJS + Bootstrap + Filter

Question

I'm trying to filter an user list. I'm using a custom Bootstrap version and want to display a 4 columns table.

So far, I've the following code:

<div ng-repeat="user in users | filter:searchValue | orderBy: 'username'">
    <span ng-switch on="$index % 4">
        <span ng-switch-when="0">
            <div class="row-fluid">
                <div class="span3" ng-if="users[$index+0]">
                    <user-item ng-model="users[$index+0]" on-click="showUser(userId)"></user-item>
                </div>
                <div class="span3" ng-if="users[$index+1]">
                    <user-item ng-model="users[$index+1]" on-click="showUser(userId)"></user-item>
                </div>
                <div class="span3" ng-if="users[$index+2]">
                    <user-item ng-model="users[$index+2]" on-click="showUser(userId)"></user-item>
                </div>
                <div class="span3" ng-if="users[$index+3]">
                    <user-item ng-model="users[$index+3]" on-click="showUser(userId)"></user-item>
                </div>
            </div>
        </span>
    </span>
</div>

So far, it works perfectly when there is no filter set. When I set a searchValue, the $index cannot display the correct value (It will always start from 0 to the lengh of the filtered array).

My question is: Is there a way to correctly display the results in a 4-cols table and to filter the result ?

Well, I'd like to get the `$index` from the whole `users Array`. I mean, if the `filter` is set to `null`, `$index` will go from 0 to 100 (As example). When I set the filter to `98` (Saying the username is something like `Username + $index`), I expect to get `$index = 97` but I got `0`. — Manitoba, Dec 25 '14 at 23:30
Check this plunker: http://plnkr.co/edit/z5ts5AJQhLIuGZxx73Z5?p=preview Expectation for `search: 4` are `name4` and `name40`. Results are `name5`, `name7`, `name8` and `name9` — Manitoba, Dec 26 '14 at 00:00
@Manitoba, are you trying to preserve the 4-column structure of the table while showing only those results that match the query? And keeping empty cells in others? — New Dev, Dec 26 '14 at 00:42
Hello and tgabks for your answers. I got an error with your last solution: `Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!`. Check the console for these plunkers. — Manitoba, Dec 26 '14 at 09:41

score 1 · Accepted Answer · edited May 23 '17 at 12:20

I don't think you need to add conditions in order to create a 4 column table using bootstrap css, simply use ng-repeat in a col-* element or using your custom span class (which I assume is created using bootstrap's mixins to create rows and columns).

DEMO

HTML

<input ng-model="searchValue.username" />
<div class="row-fluid">
  <!-- simply change col-xs-3 to span3 -->
  <div class="col-xs-3" ng-repeat="user in users | filter:searchValue | orderBy: 'username'">
    {{user.username}}
  <user-item ng-model="user" on-click="showUser(user.id)"></user-item>
  </div>
</div>

If the markup above does not work in your case because of the custom bootstrap that you're using, then you are probably better off with a filter that partitions your current array into sections of subarrays that represents a row-column relationship, answered by m59 in this SO Answer.

score 1 · Answer 2 · answered Dec 28 '14 at 11:40

1

Next time try to give a shot to ngTasty table http://zizzamia.com/ng-tasty/directive/table it's based to bootstrap css table :)

answered Dec 28 '14 at 11:40

zizzamia

241
3
9

AngularJS + Bootstrap + Filter

2 Answers2