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
– Manitoba, Commented Dec 25, 2014 at 23:30
Check this plunker: plnkr.co/edit/z5ts5AJQhLIuGZxx73Z5?p=preview Expectation for search: 4 are name4 and name40. Results are name5, name7, name8 and name9 — Manitoba
– Manitoba, Commented Dec 26, 2014 at 0: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
– New Dev, Commented Dec 26, 2014 at 0: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
– Manitoba, Commented Dec 26, 2014 at 9:41

Community · Accepted Answer · 2017-05-23 12:20:34Z

1

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.

edited May 23, 2017 at 12:20

CommunityBot

11 silver badge

answered Dec 26, 2014 at 0:51

ryeballar

30.1k10 gold badges67 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

zizzamia · Accepted Answer · 2014-12-28 11:40:46Z

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, 2014 at 11:40

zizzamia

2413 silver badges9 bronze badges

Collectives™ on Stack Overflow

AngularJS + Bootstrap + Filter

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related