Angular JS – 编辑内容编辑
在使用ng-repeat什么是编辑内容的最佳方式？
在我理想的情况下， 增加的生日将是一个超链接，当它被点击的时候，它会显示一个编辑表单 – 就像当前添加表单和更新button一样。
实时预览（Plunker）
HTML：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8"> <title>Custom Plunker</title> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script> <script> document.write('<base href="' + document.location + '" />'); </script> <script src="app.js"></script> <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.0/css/bootstrap-combined.min.css" rel="stylesheet"> </head> <body ng-app="birthdayToDo" ng-controller="main"> <div id="wrap"> <!-- Begin page content --> <div class="container"> <div class="page-header"> <h1>Birthday Reminders</h1> </div> <ul ng-repeat="bday in bdays"> <li>{{bday.name}} | {{bday.date}}</li> </ul> <form ng-show="visible" ng-submit="newBirthday()"> <label>Name:</label> <input type="text" ng-model="bdayname" placeholder="Name" ng-required/> <label>Date:</label> <input type="date" ng-model="bdaydate" placeholder="Date" ng-required/> <br/> <button class="btn" type="submit">Save</button> </form> </div> <div id="push"></div> </div> <div id="footer"> <div class="container"> <a class="btn" ng-click="visible = true"><i class="icon-plus"></i>Add</a> </div> </div> </body>
App.js：
var app = angular.module('birthdayToDo', []); app.controller('main', function($scope){ // Start as not visible but when button is tapped it will show as true $scope.visible = false; // Create the array to hold the list of Birthdays $scope.bdays = []; // Create the function to push the data into the "bdays" array $scope.newBirthday = function(){ $scope.bdays.push({name:$scope.bdayname, date:$scope.bdaydate}); $scope.bdayname = ''; $scope.bdaydate = ''; }; });
你应该把表单放在每个节点里，分别用ng-show和ng-hide启用和禁用编辑。 像这样的东西：
<li> <span ng-hide="editing" ng-click="editing = true">{{bday.name}} | {{bday.date}}</span> <form ng-show="editing" ng-submit="editing = false"> <label>Name:</label> <input type="text" ng-model="bday.name" placeholder="Name" ng-required/> <label>Date:</label> <input type="date" ng-model="bday.date" placeholder="Date" ng-required/> <br/> <button class="btn" type="submit">Save</button> </form> </li>
这里的关键是：
- 我已经将控件
ng-model改为本地作用域 - 添加
ng-show来form所以我们可以在编辑时显示它 - 添加一个带有
ng-hide的span，以便在编辑时隐藏内容 - 添加了一个
ng-click，可以在任何其他元素中，将editing切换为true - 更改了
ng-submit以将editing切换为false
这里是你更新的Plunker 。
我正在寻找一个内嵌的编辑解决scheme，我发现一个看起来很有前途的笨蛋，但是这对我来说并不适合。 经过一些修改代码后，我得到了它的工作。 荣誉给最初努力编写这个代码的人。
这个例子在这里http://plnkr.co/edit/EsW7mV?p=preview
代码如下：
app.controller('MainCtrl', function($scope) { $scope.updateTodo = function(indx) { console.log(indx); }; $scope.cancelEdit = function(value) { console.log('Canceled editing', value); }; $scope.todos = [ {id:123, title: 'Lord of the things'}, {id:321, title: 'Hoovering heights'}, {id:231, title: 'Watership brown'} ]; }); // On esc event app.directive('onEsc', function() { return function(scope, elm, attr) { elm.bind('keydown', function(e) { if (e.keyCode === 27) { scope.$apply(attr.onEsc); } }); }; }); // On enter event app.directive('onEnter', function() { return function(scope, elm, attr) { elm.bind('keypress', function(e) { if (e.keyCode === 13) { scope.$apply(attr.onEnter); } }); }; }); // Inline edit directive app.directive('inlineEdit', function($timeout) { return { scope: { model: '=inlineEdit', handleSave: '&onSave', handleCancel: '&onCancel' }, link: function(scope, elm, attr) { var previousValue; scope.edit = function() { scope.editMode = true; previousValue = scope.model; $timeout(function() { elm.find('input')[0].focus(); }, 0, false); }; scope.save = function() { scope.editMode = false; scope.handleSave({value: scope.model}); }; scope.cancel = function() { scope.editMode = false; scope.model = previousValue; scope.handleCancel({value: scope.model}); }; }, templateUrl: 'inline-edit.html' }; });
指令模板：
<div> <input type="text" on-enter="save()" on-esc="cancel()" ng-model="model" ng-show="editMode"> <button ng-click="cancel()" ng-show="editMode">cancel</button> <button ng-click="save()" ng-show="editMode">save</button> <span ng-mouseenter="showEdit = true" ng-mouseleave="showEdit = false"> <span ng-hide="editMode" ng-click="edit()">{{model}}</span> <a ng-show="showEdit" ng-click="edit()">edit</a> </span> </div>
要使用它只需加水：
<div ng-repeat="todo in todos" inline-edit="todo.title" on-save="updateTodo($index)" on-cancel="cancelEdit(todo.title)"></div>
更新：
另一种select是使用现成的Xeditable for AngularJS：
我修改了你的plunker，通过angular-xeditable来实现它的工作：
http://plnkr.co/edit/xUDrOS?p=preview
这是内联编辑的常用解决scheme – 您可以使用editable-text指令创build超链接，该指令切换到<input type="text">标签：
<a href="#" editable-text="bday.name" ng-click="myform.$show()" e-placeholder="Name"> {{bday.name || 'empty'}} </a>
对于date，我使用editable-date指令切换到html5 <input type="date"> 。
由于这是一个常见的function，为此编写一个指令是个好主意。 事实上，有人已经这样做，并开放源代码。 我在我的一个项目中使用了editablespan库，它完美的工作，强烈推荐。
