Question

我是AngularJS的新手，我正在尝试创建以下结构：

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

在我的控制器中，我通过restful web服务获取区域并成功填充范围对象。

**控制器 *

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
});

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

尽管如此，我能够在列表中的每三个项目之后进入一个新的div。我面临以下问题： 1.生成一个div和无跨距的简单网格结构 2.如何通过增加一个ID来生成id，比如说btnX（其中X是一个数字）。请问，我如何使用thw div构建网格结构并递增按钮ID的数字部分。

Answer 1

您可以ng-repeat覆盖代表您的行的数字数组，并使用嵌套的ng-repeat和ng-if来显示带有相应索引的按钮。

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

ng-if逻辑可能更漂亮，但你明白了。

使用简单插值创建每个按钮的id。我只为每个$index添加94，以匹配您问题中预期的输出。您可以使用在示波器上初始化的变量替换94以确保唯一性。

这是一个有效的演示：http://plnkr.co/edit/oxdD0bRq626DbzzA54c4?p=preview

Answer 2

我已经破解了一个对我有用的解决方案，如下所示：

* 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;
});

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

感谢您的评论，特别是小提琴。感谢。

Angularjs从列表中创建div网格

2 个答案: