CODEWITHSUNDEEP
angularjstwitter-bootstrapfilter
Manitoba
Manitoba

Reputation: 8702

AngularJS + Bootstrap + Filter

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 ?

Upvotes: 1

Views: 1577

Answers (2)

zizzamia
zizzamia

Reputation: 241

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

Upvotes: 1

ryeballar
ryeballar

Reputation: 30108

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.

Upvotes: 1

Related Questions