我正在使用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>
。正如在这个扑克中看到的那样。