Question

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

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

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

这是我的代码：

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

}]);

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

我试过检查数据，但是'$ scope.modTodo.text'我希望包含我的todo actualli的编辑值包含我发送给模态的值。

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>

现在可行了

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

1 个答案: