Question

我是AngularJs的新手。我有一个元素列表，我在div标签中显示，它位于侧边栏内。该列表包含许多元素，我打算在两列中显示项目列表，而不是单个div标签。

在Angularjs中，我们如何将列表分成两个部分，以便我可以在两个div中显示列表？

 <div class="row">
   <div class="col-lg-6" >
      <ul class="list-unstyled">
       <li ng-repeat="tag in primTags"><a ng-click="select(tag.tagId, tag.name)">{{tag.name}}</a>
        </li>
      </ul>
    </div>

    <div class="col-lg-6" >
      <ul class="list-unstyled">
       <li></li>
      </ul>
    </div>
  </div>

Answer 1

好的，请忽略我的其他答案。这是天真的不可重用的方式。

执行此操作的角度方式是使用过滤器。为什么？因为我们实际上并没有改变数据的含义，只是以不同的方式呈现它。

因此，我们希望将$scope.list过滤为均匀分割的列表。

app.filter('columns', function() {
  return function(val, col) {
    return val.filter(function(v) {
      if (val.indexOf(v) % 2 === col) {
        return true
      }
    })
  }
})

首先，这只是一个双列过滤器。您可以使用相同的技术制作n列，但这只是解决手头问题的简单方法。

现在在我们的模板中，我们可以这样做：

<li ng-repeat="item in list | columns:0">{{item}}</li>

这样，我们不必通过维护三组列表或设置任何$watch功能来重复自己。只需更新list，即可更新UI。

这里是jsfiddle：http://jsfiddle.net/V3K2g/6/

Answer 2

你需要这样的东西吗？

$scope.sublistA = $scope.list.map(function(listItem) { return listItem.propertyA; });
$scope.sublistB = $scope.list.map(function(listItem) { return listItem.propertyB; });

然后只需对两个$ scope子列表进行ng-repeat。

Answer 3

如果您只是想平等地对列表进行排序，您可以在控制器上维护两个单独的列表，如@aet所说 - 但是，如果您希望它们保持最新，则需要使用$scope.$watchCollection

$scope.$watchCollection('list', function(newVal) {
    var a = [], b = [], newLength = newVal.length;
    for (var i = 0; i < newLength; i++) {   
        if (i % 2 === 0) {
            a.push(newVal[i])
        } else {
            b.push(newVal[i])
        }
    }
    $scope.listA = a;
    $scope.listB = b;
});

http://jsfiddle.net/6Kzs9/1/

（您当然可以提高性能并优化此代码）

Answer 4

虽然我最初使用Jon Jaques＆＃39;回答，我意识到Angular实际上使用了不同的语法（和样式）。

这里是过滤器的样子，它假设有两列，并过滤一个项目列表，只返回奇数或偶数项：

app.filter('columnFilter', function()
{
    return function(items, columnNumber)
    {                   
        var toReturn = [];
        for (var i = 0; i < items.length; i++)
        {
            if (i % 2 == columnNumber)
            {
                toReturn.push(items[i]);
            }
        }
        return toReturn;
    }
});

AngularJs在两个div中划分列表

4 个答案: