Currently in the process of developing a single page todo application using AngularJs and Angular-Ui.
Encountering difficulties when attempting to edit a todo item at this stage.
The plan is to utilize a modal window for editing information, successfully sending data to the modal, however struggling with retrieving edited data from it. The data retrieved remains the same as that sent to the modal.
Below is the code snippet:
controllers.js
var todoAngularControllers = angular.module('todoAngularControllers', []);
// Todo controller.
todoAngularControllers.controller('TodoController', ['$scope', '$modal',
function ($scope, $modal) {
$scope.listTodos = [
{
id: 0,
text: 'Example task to complete',
status: false
}
]
$scope.addTodo = function(){
$scope.listTodos.push({
id: $scope.listTodos.length -1,
text: $scope.newTodo.text ,
status: false
})
}
$scope.todoDone = function(todo){
if (todo.status === false) {
$scope.listTodos[todo.id].status = true
}else{
$scope.listTodos[todo.id].status = false
};
}
$scope.open = function(todo){
var modalInstance = $modal.open({
templateUrl: 'app/partials/modalContent.html',
controller: 'ModalInstanceController',
size: 'lg',
resolve : {
todo: function(){
return $scope.listTodos[todo.id]
}
}
});
modalInstance.result.then(function (todo) {
console.log(todo);
$scope.listTodos[todo.id] = todo;
});
}
$scope.delTodo = function(todo){
$scope.listTodos.splice(todo.id, 1);
}
}]);
// Modification modal controller.
todoAngularControllers.controller('ModalInstanceController', ['$scope', '$modalInstance','todo',
function($scope, $modalInstance, todo){
$scope.todo = todo;
$scope.modTodo = function(){
$scope.todo.text = $scope.modTodo.text;
};
$scope.ok = function () {
$modalInstance.close($scope.todo);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
}]);
todo-list.html
<section>
<header>
<h1>Todos</h1>
<form ng-submit="addTodo()">
<input placeholder="What needs to be done?"
ng-model="newTodo.text"
ng-model-options="{ getterSetter: true }"
autofocus>
</form>
</header>
<ul>
<li ng-repeat="todo in listTodos">
<span>{{todo.text}}</span>
<span>{{todo.status | checkmark }}</span>
<button type="button" ng-click="todoDone(todo)">
{{todo.status | doneButton }}
</button>
<button type="button" ng-click="open(todo)">
Edit
</button>
<button type="button" ng-click="delTodo(todo)">
Delete
</button>
</li>
</ul>
</section>
modalContent.html
<div class="modal-header">
<h3 class="modal-title">Enter the desired modification</h3>
</div>
<div class="modal-body">
<form>
<input placeholder= {{todo.text}}
ng-model="modTodo.text"
autofocus>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
Attempted validation checks, revealed that '$scope.modTodo.text' which was anticipated to hold the edited value of my todo actually retains the initial value passed to the modal.