Angularjs creating a div grid from a list

Question

I am new to AngularJS and i am trying to create the following structure:

<div class="zones">
    <div class="row-fluid">
        <button id="btn94" class="span4 btn">All Zones</button>
        <button id="btn95" class="span4 btn">Zone 1</button>
        <button id="btn96" class="span4 btn">Zone 2</button>
    </div>
    <div class="row-fluid">
        <button id="btn97" class="span4 btn">Zone 3</button>
        <button id="btn98" class="span4 btn">Zone 4</button>
        <button id="btn99" class="span4 btn">Zone 5</button>
    </div>
    <div class="row-fluid">
        <button id="btn100" class="span4 btn">Zone 6</button>
    </div>
</div>

In my controller I am fetching the zones via restful web service and populating a scope object, successfully.

** Controller *

ZonesFactory.query( function(data) {
    // success handler
    var resultType = data.resulttype;
    var objects = data.result.value;
    $scope.zoneList= [];
    console.log(objects);

    if(resultType == "list"){     

        angular.forEach(objects, function (item) {

            $resource(item.href).get(function(rowData) {
            $scope.zoneList.push(rowData.zone);
            });

        });
    }
}, function(error) {
    // error handler
});

** In HTML **

<div class="zones">
  <div class="row-fluid">
    <span ng-repeat="zone in zoneList">
            <button id="{{$index}}"  class="span4 btn">{{zone}}</button>
        <span ng-if="({{$index}}%3) == 0"> </div><div class="row-fluid"> </span >
    <span>
 </div>
</div>

Though, i was able to break into a new div after every three items in the list. I am faced with the following: 1. generating a simple grid structure with div and no spans 2. how to generate the ids by incrementing an ID of say btnX (where X is a number). Please, how can i construct the grid structure using thw div and incrementing the number part of the button ID.

Why don't you try creating a 2D array in your model (3xN), and then use nested ng-repeats? — Matt Way
– Matt Way, Commented Apr 24, 2014 at 0:46

j.wittwer · Accepted Answer · 2014-04-24 02:39:12Z

1

You can ng-repeat over an array of numbers representing your rows, and use a nested ng-repeat coupled with ng-if to display buttons with the appropriate indexes.

<div class="zones">
  <div class="row-fluid" ng-repeat="row in [0,1,2]">
    <button id="btn{{94+$index}}" 
      ng-repeat="zone in zoneList" 
      ng-if="($index)/3 < row + 1 && ($index)/3 >= row" class="span4 btn">
      {{zone}}
    </button>
  </div>
</div>

The ng-if logic could be prettier, but you get the idea.

The id of each button is created with simple interpolation. I add 94 to each $index only to match the output expected in your question. You could replace 94 with a variable initialized on your scope to ensure uniqueness.

Here is a working demo: http://plnkr.co/edit/oxdD0bRq626DbzzA54c4?p=preview

answered Apr 24, 2014 at 2:39

j.wittwer

9,4973 gold badges32 silver badges32 bronze badges

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

Comments

Mega · Accepted Answer · 2014-04-24 14:32:26Z

I have cracked a solution that works for me, as follows:

* IN CONTROLLER **

app.filter('partition', function($cacheFactory) {
  var arrayCache = $cacheFactory('partition');
  var filter = function(arr, size) {
    if (!arr) { return; }
    var newArr = [];
    for (var i=0; i<arr.length; i+=size) {
        newArr.push(arr.slice(i, i+size));        
    }
    var cachedParts;
    var arrString = JSON.stringify(arr);
    cachedParts = arrayCache.get(arrString+size); 
    if (JSON.stringify(cachedParts) === JSON.stringify(newArr)) {
      return cachedParts;
    }
    arrayCache.put(arrString+size, newArr);
    return newArr;
  };
  return filter;
});

* IN HTML **

 <div class="zones">                                
    <div class="row-fluid" ng-repeat="zones in zoneList | partition:3" ng-init="outerIndex = $index">
        <button id="{{'btn'+(94 + outerIndex*3+ $index)}}" class="span4 btn" ng-repeat="zone in zones">{{'btn'+(94 + outerIndex*3+ $index)}} {{zone}}</button>
    </div>  
</div>

Thanks for the comments, especially the fiddle. Thanks.

Collectives™ on Stack Overflow

Angularjs creating a div grid from a list

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related