AngularJS does not provide a way to create multiple copies of an element.
Still this behavior is easy to achieve. Check the bellow filter which solves this problem:
'use strict';
angular
.module('APP')
.filter('range', function() {
return function(input, total) {
total = parseInt(total, 10);
for(var i=0; i<total; ++i) {
input.push(i);
}
return input;
};
})
;
Usage:
<div ng-repeat="n in [] | range:10">element copy #{{$index}}/10</div>
I’ve created this filter to allow hour selection using HTML dropdown.
The filter accepts as input three paramers: the starting hour, the ending hour, and the minute interval.
var app = angular.module('APP', ['APP.filters']);
app.controller('MainController', ['$scope', function($scope) {
}]);
angular.module('APP.filters', []).filter('time', function() {
return function(input, from, to, interval) {
from = parseInt(from, 10);
to = parseInt(to, 10);
interval = parseInt(interval, 10);
for(var i=from, y=0; i<=to; ++i, y+=interval) {
for(var y=0; y<60; y+=interval) {
input.push(((i % 12) || 12)+ ":" + (y===0?'00':y) +" " + (i>12?'pm':'am'));
}
}
return input;
};
});
Usage:
<div ng-app="APP" ng-controller="MainController">
<select>
<option ng-repeat="h_m in [] | time:8:20:60">{{h_m}}</option>
</select>
</div>
The above filter time:8:20:60 will output all the hours starting with 8 AM – 8 PM
The starting/ending hour must be between 0-24.
The interval can be between 1-60.
The filter can be used for showing multiple minutes in an hour.
For example time:10:14:15 will output 10:00 am, 10:15 am, 10:30 am, … , 13:45 pm, 14:00 pm.