AngularJS使用模板进行内联编辑不起作用
AngularJS inline editing using template not working
我正在做一个项目,它的内联编辑与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()">✘</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>
我的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 = {};
};
}]);
用以下代码更新:
<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()">✘</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>
</div>
相关文章:
- 编辑不起作用的表单的特定行和重置特定字段
- `ie9`-contenteditable false在父级可编辑时不起作用
- 在内联编辑的情况下,Knockout绑定不起作用
- jqGrid-保存内联编辑不起作用
- Node.js应用程序中的编辑不起作用
- 所见即所得内容中的撤消和重做SWT中的可编辑内容;不起作用
- CKEditor编辑器.resize()在jQuery中不起作用
- 编辑器导出的json文件不起作用
- 在我的项目中,添加、删除和编辑功能不起作用
- 禁用编辑和删除按钮在IE9中不起作用,但在IE11中起作用
- 单击动态创建的编辑按钮不起作用
- Emberjs 车把内容绑定编辑字段不起作用
- AngularJS编辑记录行为不起作用
- 箭头键在内容中不起作用可编辑
- 如何在选择框中设置只读 false,当选中复选框时,它将是可编辑的.在我的jquery代码中,禁用不起作用
- 数据表可编辑插件在数据表中动态添加行后不起作用
- 添加,编辑,删除不起作用
- AngularJS使用模板进行内联编辑不起作用
- 剑道网格内的剑道组合框编辑不起作用
- 本地存储编辑不起作用