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

Question

我目前正在尝试使用 AngularJs 和 Angular-Ui 构建一个待办事项单页应用程序。

目前我在尝试编辑待办事项时遇到了问题。

我打算使用模态窗口来编辑信息，我已经找到了如何在我的模态窗口中发送数据，但我无法从中检索已编辑的数据。我得到的数据是我发送给模态的数据。

这是我的代码：

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');
  };

}]);

待办事项列表.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>

我试图检查数据，但我希望包含我的待办事项的编辑值的“$scope.modTodo.text”实际上包含我发送到模态的值。

Answer 1

在 modalContent.html 我已经替换了

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

由

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

现在可以了