AngularJS + Bootstrap + Filter

Question

Я пытаюсь отфильтровать список пользователей. Я использую пользовательскую версию Bootstrap и хочу отобразить таблицу из 4 столбцов.

До сих пор, у меня есть следующий код:

<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> 

До сих пор он прекрасно работает, когда нет набора фильтров. Когда я установил searchValue, $index не может отобразить правильное значение (он всегда будет начинаться с 0 до длины фильтрованного массива).

Мой вопрос: есть ли способ правильно отобразить результаты в таблице 4-cols и отфильтровать результат?

Answer 1

Я не думаю, что нужно добавить условия для того, чтобы создать таблицу с 4 столбца с использованием начальной загрузки CSS, просто использовать ng-repeat в col-* элемента или с помощью вашего изготовленного на заказ span класс (который я предполагаю, создается с помощью Примеси Bootstrap для создания строки и столбцы).

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> 

Если разметка выше не работает в вашем случае из пользовательского загрузчике, который вы используете, то вы, вероятно, лучше с фильтр, который разбивает ваш текущий массив на секции подмассивов, которые представляют отношение столбцов к столбцу, ответил m59 in this SO Answer.

Answer 2

В следующий раз попытаться дать выстрел ngTasty таблице http://zizzamia.com/ng-tasty/directive/table он основан на начальную загрузку CSS таблицы :)