Javascript AngularJS使用模板进行内联编辑无效
我正在做一个项目,它的内联编辑与使用模板相同。我想要的内联编辑是当我编辑第一个项目时,突然在第二个项目上单击“编辑”,第一个项目不在编辑中(自动关闭)。但我的应用程序似乎不起作用。有什么解决办法吗 我的HTML代码:Javascript AngularJS使用模板进行内联编辑无效,javascript,angularjs,Javascript,Angularjs,我正在做一个项目,它的内联编辑与使用模板相同。我想要的内联编辑是当我编辑第一个项目时,突然在第二个项目上单击“编辑”,第一个项目不在编辑中(自动关闭)。但我的应用程序似乎不起作用。有什么解决办法吗 我的HTML代码: <!doctype html> <html ng-app="todoApp"> <head> <script src="bower_components/angular/angular.min.js"></script&
<!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()">✘</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()">✘</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>
更新代码如下:
未完成:{{剩余()}}
已完成:{{todos.length-remaining()}}
-
NewField:{{selected | json}}
Todos:{{Todos | json}}
✘
{{todo.text}
编辑
✘
拯救
取消
将你的tepmlates从ul li移出。@Nirvana移动到哪里?我移动到div和body,但它是空白页,它仍然不工作。编辑按钮不起作用@Nirvanacan u请创建一把小提琴?你好@Nirvana,怎么样?
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 = {};
};
}]);