Skip to content

Instantly share code, notes, and snippets.

@esseti
Last active August 29, 2015 14:20
Show Gist options
  • Save esseti/fcb3d5257ef6df812f01 to your computer and use it in GitHub Desktop.
Save esseti/fcb3d5257ef6df812f01 to your computer and use it in GitHub Desktop.
Date conversion angular, directive
<!--this pages renders the course and also the form to edit it-->
<!--it is for inline editing-->
<!-- note that in the first part is course.endDate and in the second course._endDate-->
<!--render the object, hide it when edit-->
<div ng-hide="edit">
End {{course.endDate | date: 'yyyy-MM-dd HH:mm:ss'}}
</div>
<!--...-->
<!--this is the button to edit the course (see the show/hide on the two divs) -->
<!--its logic is in the ctrl-->
<button ng-click="editFn(course)" >edit</button>
<!--...-->
<!--when rendered the _endDate is null, but the form is not shown-->
<div ng-show="edit">
<form name="courseForm" novalidate>
<input
class="form-control"
ng-model="course._endDate"
type="datetime-local"
id="endDate" name="endDate" ng-required="true" />
<!--....-->
</form>
</div>
angular.module('gcCoachApp')
.directive('gcCourseItem', function () {
return {
templateUrl: 'coursedetail.html',
restrict: 'E',
controller: "GcCourseFormCtrl as gcCourseFormCtrl"
};
});
angular.module('gcCoachApp')
.controller('GcCourseFormCtrl', function ($scope, gcResourceCourses, $stateParams, gettext, $timeout) {
//...
$scope.editFn = function (course) {
$scope.edit = true;
//this is to overcome the problem in conversion.
//in this way we fake the conversion.
//we fill in the data that are shown in the form.
$scope.course._endDate = new Date(course.endDate);
$scope.course._startDate = new Date(course.startDate);
};
$scope.update = function (update_course) {
var course = angular.copy(update_course);
//this is just local, so convert and remove extra fields.
course.endDate = course._endDate.getTime()
//removing the fake on since it's not accepted by the server..
delete course._endDate;
gcResourceCourses.update(course).$promise.then(function (res) {
$scope.edit = false;
//since it's updated, we update the refernece. which updates the view.
//without this the rendered coruse is not updated
//it can be also done outsde the promise, but if there's an error then the pag
//e will change the value while the server has not updated the object
update_course = res;
});
};
})
;
<!--the main file where the render of the directive is made-->
<div ng-repeat="course in courses">
<gc-course-item></gc-course-item>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment