Question

我无法找到答案，或者我找不到合适的位置，但我正试图找到一种方法，我可以使用一个大面板内的多个元素（面板）进行分组AngularJS和Bootstrap。

例如，我有大约60个左右的迷你面板代表客户联系表格。所有这些表单都位于一个带有ng-repeat的大面板中。我想以某种方式按照不同的标准（例如按国家代码或公司类型等）从下拉控件中对我的联系人进行分组。

我希望所有联系人都显示在一个面板中，但是按.page-header隔离（与下面示例类似的设置）：

有没有人在任何地方看到这方面的任何例子，或者有关于如何实现这一点的任何细节？

Answer 1

您可以使用Array#reduce，ng-repeat-start和ng-repeat-end来使用数组：

HTML（我在这里使用bootstrap＆＃39的面板用于说明目的）：

<body ng-app="MyApp">
  <div ng-controller="MyCtrl">
    <div class="panel panel-default">
      <div class="panel-heading" ng-repeat-start="(group, values) in groupedData">
        {{ group }}
      </div>
      <div class="panel-body" ng-repeat-end ng-repeat="value in values">
         {{ value.name }}
      </div>
    </div>

  </div>
</body>

JavaScript的：

angular.module('MyApp', []).controller('MyCtrl', ['$scope', function($scope){

  var rawData = [{
    "name": "A1",
    "group": "A"  // For simplicity, my grouping criteria is called 'group'
  },{
    "name": "A2",
    "group": "A"
  },{
    "name": "A3",
    "group": "A"
  },{
    "name": "B1",
    "group": "B"
  },{
    "name": "C1",
    "group": "C"
  },{
    "name": "C2",
    "group": "C"
  }];

  // Perform a Group-by on the rawData: {"A": [{...}], ...} using Array#reduce
  $scope.groupedData = rawData.reduce(function(accumulator, value){
    if(!accumulator[value.group]) accumulator[value.group] = [];
    accumulator[value.group].push(value);
    return accumulator;
  }, {});

}]);

JSBin示例：http://jsbin.com/gigerilope/edit?html,js,output

修改：回答您的扩展问题：

要在点击某个按钮时触发此分组，我们首先添加一个按钮并绑定ng-click处理程序：

<button class="btn btn-default" ng-click="performGrouping()">
  Perform Grouping
</button>

在控制器上，我们不是立即分配分组数据，而是将它包装在ng-click上调用的处理函数中：

  $scope.groupedData = null;
  $scope.performGrouping = function() {
    $scope.groupedData = rawData.reduce(function(accumulator, value) {
      if (!accumulator[value.group]) accumulator[value.group] = [];
      accumulator[value.group].push(value);
      return accumulator;
    }, {});
  };

现在我们要展示一个＆＃34; No Grouping＆＃34;在点击按钮之前，我们添加一个<div>面板来讲述故事：

<div class="panel panel-default">
  <div class="panel-body">
    No Grouping Yet
  </div>
</div>

此时，可以看到两个面板 - 我们需要一次显示一个。真相检查$scope.groupedData将是一个好主意：

结果小组：

<div class="panel panel-default" ng-show="groupedData">

＆＃34;没有分组＆＃34;面板：

<div class="panel panel-default" ng-hide="groupedData">

但是，如果rawData是一个空数组，groupedData将是一个空对象{}，它将解析为true。我们可以通过按键检查来检查groupedData有多少个密钥。为此，我们必须添加一个函数来返回键：

$scope.keys = function(obj) {
  return obj && Object.keys(obj);
};

然后再次更新模板HTML：

结果小组：

<div class="panel panel-default" ng-show="keys(groupedData).length">

＆＃34;没有分组＆＃34;面板：

<div class="panel panel-default" ng-hide="keys(groupedData).length">

我们现在应该好。

JSFiddle to the solution：https://jsfiddle.net/kazenorin/Ler7p6fe/

使用AngularJS和Bootstrap在面板内对面板进行分组

1 个答案: