I'm struggling with my TodoList in AngularJS. I need help creating the ngClick
function for the "addTodo" button. My goal is to send the entire form data to another page where I can display the tasks. Can someone guide me on what needs to be added to the ng-click method and in todos-data.js? Here is a snippet of my code:
In todos-data.js (I currently manually add tasks, but I want to add them from the form):
app.factory('todos', function () { return [
{
'title': 'Date with Julia', 'done': false, "type": { "name":
"Personal", "gico": "heart" }, 'estimates': 3, "date": "11/11/2015"
},
{
'title': 'Gym', 'done': false, "type": { "name":
"Health", "gico": "tint" }, 'estimates': 2, "date": "12/11/2015"
},
{
'title': 'Next steps in AngularJS', 'done': false, "type": { "name":
"Learning", "gico": "book" }, 'estimates': 4, "date": "14/11/2015"
},
{
'title': 'Meeting with Jan', 'done': false, "type": { "name":
"Business", "gico": "usd" }, 'estimates': 1, "date": "15/11/2015"
},
{
'title': 'Run errands', 'done': false, "type": { "name":
"Personal", "gico": "heart" }, 'estimates': 6, "date": "16/05/2015"
}
];
});
Below is the form with the button:
edit.tpl.html
<div class="panel-body">
<form name="f" data-ng-submit="addTodo()">
<label for="title">Name:</label>
<input class="form-control" id="title" name="newTodo" data-ng-model="formData.newTodo" required>
<label for="type">Type:</label>
<select class="form-control" id="type" name="type" data-ng-model="formData.type" required>
<option ng-repeat="value in categories" value="value.name">{{value.name}}</option>
</select>
<label for="estimates">Estimated time:</label>
<select class="form-control" id="estimates" name="estimates" data-ng-model="formData.estimates" data-ng-options="value + 'h' for value in [] | rangeTime:9:true" >
</select>
<label for="text">Date:</label>
<input class="form-control" id="text" type="text" data-ng-model="formData.date" data-ng-date-picker="" name="date" required readonly="readonly">
<br />
<button class="btn btn-success" data-ng-disabled="f.$invalid" ng-click="addTodo()">Add <span class="glyphicon glyphicon-ok"></span></button>
</form>