这是一个小应用程序,您可以在其中添加项目,编辑它们并删除 - 所有这些都在控制器中描述,基于角度2路数据绑定。
http://cssdeck.com/labs/schedule-of-the-red-hood
每次添加元素时,在calednar-bar中都应该以编程方式插入一个元素,在指令模板中描述:
template: '<div ng-repeat="event in events" class="event">' +
'<h3 ng-model="event.Name">{{event.Name}}</h3>' +
'<span ng-model="event.StartTime; event.EndTime" class="time">{{event.StartTime}}-{{event.EndTime}}</span>' +
'</div>'
虽然我无法了解如何从控制器链接范围,但是从控制器绑定元素插入:
$scope.addEvent = function(event, attrs) {
$scope.events.push(event);
$scope.event = {};
var eventGrid = angular.element(document.createElement('eventGrid')),
el = $compile(eventGrid)($scope);
angular.element(document.body).append(eventGrid);
$scope.insertHere = el;
}
答案 0 :(得分:0)
您需要更多数据驱动,忘记向dom添加内容。 E.g。
$scope.addEvent = function(event, attrs) {
$scope.events.push(event);
$scope.event = {};
/*var eventGrid = angular.element(document.createElement('eventGrid')),
el = $compile(eventGrid)($scope);
angular.element(document.body).append(eventGrid);
$scope.insertHere = el;*/
}
//add an order by to your ng-repeat
<li ng-repeat="event in events|orderBy:StartTime">
而不是将StartTime
保存为字符串,而不是将其另存为数字,并使用过滤器将秒数转换为您的友好HH:MM:AM|PM.
从字符串到秒的转换是最难的部分,但这是正确的方法。