Currently, I am experimenting with Angularjs alongside TypeScript to create a simple to-do list as a web page for practice and fun. Below is my controller that interacts with the database and stores the objects:
module app.ToDo {
class ToDoCtrl {
toDoItems: app.domain.ToDoItems[];
static $inject = ["dataAccessService"];
constructor(private dataAccessService: app.common.DataAccessService)
{
this.toDoItems = [];
var toDoResource = dataAccessService.getToDoResource();
toDoResource.query((data: app.domain.ToDoItems[]) => {
this.toDoItems = data;
});
}
}
angular.module("toDoManagement").controller("ToDoCtrl", ToDoCtrl);
}
Below is my ToDoItems class:
module app.domain {
export class ToDoItems {
constructor(public id: number, public title: string, public description: string,
public due: Date, public completed: boolean) { }
}
}
These are all of the fields present in my database. Here's a glimpse of my view:
<table>
<thead>
<tr>
<td>Title</td>
<td>Description</td>
<td>Due Date</td>
<td>Completed</td>
</tr>
</thead>
<tbody ng-repeat="item in vm.toDoItems">
<tr>
<td>{{item.title}}</td>
<td>{{item.description}}</td>
<td>{{item.due}}</td>
<td>{{item.completed}}</td>
</tr>
</tbody>
</table>
An issue arose where the Due column remained empty in each row. Could this be due to a formatting error while transitioning data from MySQL to JavaScript? Notably, the Due field within my database is of type DATE, not DATETIME.
SOLVED: The dilemma stemmed from a variable naming discrepancy, resulting in the value of Due being allocated to a non-existent variable in the class and inadvertently creating a new variable named due_Date. To rectify this, I simply adjusted the binding from {{item.due}} to {{item.due_Date}}.