Question

我正在使用模板进行内联编辑与http://jsfiddle.net/benfosterdev/UWLFJ/相同的项目。我想要的内联编辑是当我编辑第一个项目时，我突然点击第二个项目的编辑，第一个项目没有编辑（自动关闭）。但它似乎不适用于我的应用程序。有没有解决方案？

我的HTML代码：

<!doctype html>
<html ng-app="todoApp">
<head>
    <script src="bower_components/angular/angular.min.js"></script>
    <script src="js/controller.js"></script>
    <style>
    .done-true {
      text-decoration: line-through;
      color: grey;
    }

    input:required {
    box-shadow:none;
    }
    </style>
</head>
<body>

<h2>Todo</h2>

<div ng-controller="TodoListController">

<form ng-submit="addTodo()" name="form">
    <input type="text" ng-model="todoText"  size="30" placeholder="add new todo here" required>
    <input class="btn-primary" type="submit" value="add"> 
</form>

<div>Incompleted : {{remaining()}}</div>
<div>Completed : {{todos.length - remaining()}}</div>

<a href="" ng-click="delete()">Delete</a>

<ul class="unstyled">
   <li ng-repeat="todo in todos" ng-include="getTemplate(todo)">

       <script type="text/ng-template" id="display">
            <button type="button" ng-click="remove()">&#10008;</button>
            <input type="checkbox" ng-model="todo.done">
            <span class="done-{{todo.done}}">{{todo.text}}</span>
            <button type="submit" ng-click="change(todo)">Edit</button>
       </script>

       <script type="text/ng-template" id="edit">
            <button type="button" ng-click="remove()">&#10008;</button>
            <input type="text" ng-model="selected.text">
            <button type="submit" ng-click="save($index)">Save</button>
            <button type="submit" ng-click="cancel()">Cancel</button>
        </script>   
    </li>
</ul>

<pre>NewField : {{selected | json}}</pre>
<pre>Todos : {{todos | json}}</pre>


</div>

</body>
</html>

我的JS代码：

var app = angular.module('todoApp', [])

app.controller('TodoListController', ['$scope', function($scope) {

    $scope.todos = [];

    $scope.selected = {};

    $scope.addTodo = function() {
        $scope.todos.unshift({text:$scope.todoText, done:false, editing:false});
        $scope.todoText = '';
    };

    $scope.remaining = function() {
        var count = 0;
        angular.forEach($scope.todos, function(todo) {
            count += todo.done ? 0 : 1;
        });
          return count;
        };

    $scope.delete = function() {
        var oldTodos = $scope.todos;
        $scope.todos = [];
        angular.forEach(oldTodos, function(todo) {
           if (!todo.done) $scope.todos.push(todo);
        });
    };

    $scope.remove = function(){
        $scope.todos.splice(this.$index, 1);
        $scope.selected.splice(this.$index, 1);
    };

     $scope.getTemplate = function (todo) {
        if ($scope.todos.indexOf(todo) === $scope.todos.indexOf($scope.selected)) return 'edit';
        else return 'display';
    };

    $scope.change = function(field){
        $scope.selected = angular.copy(field);
    }

    $scope.save = function(index) {
        $scope.todos[index] = angular.copy($scope.selected);
        $scope.cancel();
    };

    $scope.cancel = function() {
        $scope.selected = {};       
    };




}]);

Answer 1

使用以下代码进行更新：

＆＃13;

<div ng-controller="TodoListController">
<form ng-submit="addTodo()" name="form">
    <input type="text" ng-model="todoText"  size="30" placeholder="add new todo here" required>
    <input class="btn-primary" type="submit" value="add"> 
</form>
<div>Incompleted : {{remaining()}}</div>
<div>Completed : {{todos.length - remaining()}}</div>
<a href="" ng-click="delete()">Delete</a>
<ul class="unstyled">
   <li ng-repeat="todo in todos" ng-include="getTemplate(todo)">
 
    </li>
</ul>
<pre>NewField : {{selected | json}}</pre>
<pre>Todos : {{todos | json}}</pre>
<script type="text/ng-template" id="display">
    <button type="button" ng-click="remove()">&#10008;</button>
    <input type="checkbox" ng-model="todo.done">
    <span class="done-{{todo.done}}">{{todo.text}}</span>
    <button type="submit" ng-click="change(todo)">Edit</button>
</script>

<script type="text/ng-template" id="edit">
    <button type="button" ng-click="remove()">&#10008;</button>
    <input type="text" ng-model="selected.text">
    <button type="submit" ng-click="save($index)">Save</button>
    <button type="submit" ng-click="cancel()">Cancel</button>
</script>
</div>

＆＃13;

使用模板无效的AngularJS内联编辑

1 个答案: