如何在使用 ng-repeat 显示表数据时放置条件新行

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

本文关键字：数据 新行 条件 显示 ng-repeat      更新时间：2023-09-26

我正在使用angularjs v 1.4.x。

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

我已经为相同的创建了一个 plnkr，但我无法获得预期的结果。我试过ng-switch，ng-repeat-start但没有成功。

文件： 

<!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 下午

1：30 下午3：00 下午3：15 下午3：30
下午3：45 下午4：15 下午4：30
下午4：45

普伦克：

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

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

任何帮助，不胜感激。

请尝试以下更改：

在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 重复：

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

这是有效的更新的 plunker：http://plnkr.co/edit/XiWYgv2AQnroLtY5qTZC?p=preview

更新：

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

只需将应用程序中的代码更改为以下内容.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);

我已经更新了 plunkr（根据威尔和你的评论），我希望它接近你的期望。您是否有任何使用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

如果你不需要<table>这几乎是微不足道的;只需根据ng重复$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>

但是，没有简单的方法可以将该技术映射到表的 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>

。正如在这个扑克中看到的那样。

相关文章：