使用 ng-repeat 显示 table 数据时如何放置条件换行？

Question

我正在使用 angularjs v 1.4.x.

我有一个场景需要显示用户选择的时间段。只需要向用户显示可用的时间段。

我已经为此创建了一个 plnkr，但我无法获得所需的结果。我尝试了 ng-switch、ng-repeat-start 但没有成功。

HTML 文件:

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <script data-require="angular.js@*" data-semver="1.3.6" src="https://code.angularjs.org/1.3.6/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="app.js"></script>
  </head>

  <body ng-Controller="MainCtrl">
    <table border="1">
      <thead>
        <tr>
          <th>Total Slots {{slotAvailableForSelectionCount}}</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="slot in slotInfo.slots">
          <td ng-if="slot.isAvailable">{{slot.slotTime}}</td>
        </tr>

      </tbody>
    </table>
  </body>

</html>

JS文件：

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.slotInfo = {
    "slots":[
    {"sequence":1,"isAvailable":false,"slotTime":"9:00 AM"},
    {"sequence":2,"isAvailable":false,"slotTime":"9:15 AM"},
    {"sequence":3,"isAvailable":false,"slotTime":"9:30 AM"},
    {"sequence":4,"isAvailable":false,"slotTime":"9:45 AM"},
    {"sequence":5,"isAvailable":false,"slotTime":"10:00 AM"},
    {"sequence":6,"isAvailable":false,"slotTime":"10:15 AM"},
    {"sequence":7,"isAvailable":false,"slotTime":"10:30 AM"},
    {"sequence":8,"isAvailable":false,"slotTime":"10:45 AM"},
    {"sequence":9,"isAvailable":false,"slotTime":"11:00 AM"},
    {"sequence":10,"isAvailable":false,"slotTime":"11:15 AM"},
    {"sequence":11,"isAvailable":false,"slotTime":"11:30 AM"},
    {"sequence":12,"isAvailable":false,"slotTime":"11:45 AM"},
    {"sequence":13,"isAvailable":false,"slotTime":"12:00 PM"},
    {"sequence":14,"isAvailable":false,"slotTime":"12:15 PM"},
    {"sequence":15,"isAvailable":false,"slotTime":"12:30 PM"},
    {"sequence":16,"isAvailable":false,"slotTime":"12:45 PM"},
    {"sequence":17,"isAvailable":false,"slotTime":"1:00 PM"},
    {"sequence":18,"isAvailable":true,"slotTime":"1:15 PM"},
    {"sequence":19,"isAvailable":true,"slotTime":"1:30 PM"},
    {"sequence":20,"isAvailable":false,"slotTime":"1:45 PM"},
    {"sequence":21,"isAvailable":false,"slotTime":"2:00 PM"},
    {"sequence":22,"isAvailable":false,"slotTime":"2:15 PM"},
    {"sequence":23,"isAvailable":false,"slotTime":"2:30 PM"},
    {"sequence":24,"isAvailable":false,"slotTime":"2:45 PM"},
    {"sequence":25,"isAvailable":true,"slotTime":"3:00 PM"},
    {"sequence":26,"isAvailable":true,"slotTime":"3:15 PM"},
    {"sequence":27,"isAvailable":true,"slotTime":"3:30 PM"},
    {"sequence":28,"isAvailable":true,"slotTime":"3:45 PM"},
    {"sequence":29,"isAvailable":false,"slotTime":"4:00 PM"},
    {"sequence":30,"isAvailable":true,"slotTime":"4:15 PM"},
    {"sequence":31,"isAvailable":true,"slotTime":"4:30 PM"},
    {"sequence":32,"isAvailable":true,"slotTime":"4:45 PM"}]};

    $scope.slotAvailableForSelectionCount = 0;
    isAnySlotSelectionAvailable = function(){
                if($scope.slotInfo != null && $scope.slotInfo.slots != null){
                    for(var i=0; i<$scope.slotInfo.slots.length ;i++){
                        if($scope.slotInfo.slots[i].isAvailable == true){
                            $scope.slotAvailableForSelectionCount = $scope.slotAvailableForSelectionCount + 1;
                        }
                    }
                }
            };

            isAnySlotSelectionAvailable();
});

想要的结果：

1:15 PM 1:30 PM 3:00 PM 3:15 PM
3:30 PM 3:45 PM 4:15 PM 4:30 PM
4:45 PM

笨蛋：

http://plnkr.co/edit/GywMB3Ul98rsPRhxV6C4?p=preview

显示时间由属性isAvailable = true决定。

感谢任何帮助。

Answer 1

我已经更新了 plunkr（根据 Will 和您的评论），我希望它接近您的期望。您是否有使用 table 或任何其他 HTML 元素的特定要求

<p class="title">Total Slots: {{slotAvailableForSelectionCount}}</p>
<div class="container" ng-repeat="slot in slotInfo.slots">
  <div class="slot" ng-if="slot.isAvailable">{{slot.slotTime}}</div>
</div>

让我知道这是否正确

http://plnkr.co/edit/ResdNr904UKrrzgvsquY?p=preview

Answer 2

试试这些改变：

在 js 中将您的一天重新映射为多个部分：

$scope.hours = [];
$scope.slotInfo.slots.forEach(function(v, k) {
    if (v.isAvailable) {
        var ary = v.slotTime.split(':');
        $scope.hours[ary[0]] = $scope.hours[ary[0]] || [];
        $scope.hours[ary[0]].push(v);
    }
});

它基本上创建了一个小时数组，其中有可用的时段。在每个小时内，元素将是实际可用的内部插槽数组。

在您的 html 中，创建两个 ng-repeats：

<tr ng-repeat="hour in hours track by $index">
    <td ng-repeat="slot in hour">{{slot.slotTime}}</td>
</tr>

这是可用的更新插件： http://plnkr.co/edit/XiWYgv2AQnroLtY5qTZC?p=preview

更新：

根据OP的更新要求，我更新了上面的plunker以产生结果。

只需将 app.js 中的代码更改为：

$scope.hours = [];
var slots = [];
$scope.slotInfo.slots.forEach(function(v, k) {
    if (v.isAvailable) {
        if (slots.length === 4) {
            $scope.hours.push(slots);
            slots = [];
        }
        slots.push(v);
    }
});
// don't forget to push the final slots
$scope.hours.push(slots);

Answer 3

查看 ng-repeat 中包含的过滤服务 https://docs.angularjs.org/api/ng/filter/filter

Answer 4

如果您不需要 <table> 这几乎是微不足道的；只需根据 ng-repeat $index 开始一个新行。（这需要将 ng-if 更改为 ng-repeat 上的过滤器——否则 $index 将引用未过滤的数据）：

    <span ng-repeat="slot in slotInfo.slots | filter:{isAvailable:true}">
      {{slot.slotTime}}
      <div ng-if="$index % 4 == 3"><!-- new row --></div>
    </span>

不过，没有简单的方法可以将该技术映射到 table 的 HTML 结构。

如果您需要 <table>，您可能希望将数组分块到指令或控制器中的行中：

var chunkArray = function(arr,n) {      
  // splits arr into a 2d array with n items per row
  var ret = [];
  while(arr.length > 0) {
    ret.push(arr.splice(0,n));
  }
  return ret;         
}

// filter out the items which aren't isAvailable, and 
// chunk the rest into rows of 4 each:
$scope.availableSlots = chunkArray(
  $filter('filter')($scope.slotInfo.slots, {isAvailable: true})
  , 4
);

在将其传递给模板之前：

<table border="1">
  <tr ng-repeat="row in availableSlots">
    <td ng-repeat="col in row">{{col.slotTime}}</td>
  </tr>
</table>

...如 this plunk.

中所示

使用 ng-repeat 显示 table 数据时如何放置条件换行？

How to put a conditional new line when showing table data using ng-repeat?

javascript

angularjs

ng-repeat