Angular-Ui用模态形式编辑数据

Question

I'm currently trying to build a todo single page application with AngularJs and Angular-Ui.

At the moment I'm having trouble when trying to edit a todo.

I'm planning to use a modal window to edit info, I've found how to send data in my modal but i'm having trouble at retrieving edited data from it. The data I get is the data I sent to the modal.

Here's my code :

controllers.js

var todoAngularControllers = angular.module('todoAngularControllers', []);

//controleur des todos.
todoAngularControllers.controller('TodoController', ['$scope', '$modal',
  function ($scope, $modal) {

    $scope.listTodos = [
        {
            id: 0,
            text: 'Exemple de tâche à réaliser',
            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);

    }
}]);


//controleur de la modale de modification

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="Qu'avez-vous à faire ?" 
                    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)">
                Modifier
            </button>
            <button type="button" ng-click="delTodo(todo)">
                Supprimer
            </button>
        </li>
    </ul>

</section>

modalContent.html

<div class="modal-header">
    <h3 class="modal-title">Saisissez la modification souhaitée</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>

I've tried to check data but '$scope.modTodo.text' which I expected to contain edited value of my todo actualli contains the value I sent to the modal.

Answer 1

In modalContent.html i've replaced

<form>
     <input placeholder= {{todo.text}}
            ng-model: "modTodo.text"
            autofocus>
</form>

By

<form>
     <input placeholder= {{todo.text}}
            ng-model= "modTodo.text"
            autofocus>
</form>

An now it works