Angular filters and a bootstrap grid

[Ben Srour]

Hello,

I am using the bootstrap grid to lay out a list of users in a table-like format. I.e every item is exactly the same, it just shows up in a grid view.

The template for this is:

  <div class="span2">

  <form class="form-search">

<input ng-model="query" type="text" class="input-medium search-query" placeholder='Search'>

</form>

    <div class='row-fluid' ng-repeat='row in friendListRows'>

      

      <div class='span4' ng-repeat='userId in row'>

        

        <p class="text-center"><img src="images/user_placeholder.png" class="img-rounded"><br>

        <a href="/#/user/{{userId}}">{{userList[userId].firstName}} {{userList[userId].lastName}}</a></p>

      

      </div>

    </div>

  </div>

Then I have a two dimensional array (friendListRows). Each item in the two dimensional array is a user Id. When I have a given a userId I dereference the data by indexing to an index datastructure that has all of my user's data (first names, last names).

I have a couple of questions:
1) Is this the best way to render a table of identical items? I looked at using a table but it felt icky and complex with respect to css styling

2) How can I search this list using a filter? do i need to build a custom filter function and re-sort friendListRows with it? Or should I copy user data into the friendListRows array so maybe the string parsing of the default filter function will 'just work'?

The friend list rows code is here:

for(var userId in SharedStateCacheService.userList){

    

    //Skip the current user since we are showing the list of friends

    if(userId != $scope.User.id){

      console.log('friend:'+userId);

      if($scope.friendListRows[rowIndex] == undefined){

        $scope.friendListRows[rowIndex] = [];

      }

      //Add data to the current row as long as we arent past the max column count

      if(columnIndex <= (maxColumns-1)){

        $scope.friendListRows[rowIndex][columnIndex] = userId;

        columnIndex++;

      }

      else{

        //we are past the max number of columns. reset the column index, and increment the rowindex

        rowIndex++;

        columnIndex = 0;

      }

    }

  }