div - title html css
Editar en lugar Edición de contenido (4)
Al utilizar ng-repeat ¿cuál es la mejor manera de poder editar contenido?
En mi situación ideal, el cumpleaños agregado sería un hipervínculo. Cuando se toca, se mostrará un formulario de edición, al igual que el formulario de agregar actual con un botón de actualización.
Vista previa en vivo (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 = '''';
};
});
Dado que esta es una funcionalidad común, es una buena idea escribir una directiva para esto. De hecho, alguien ya lo hizo y lo abrió. Utilicé la biblioteca editablespan en uno de mis proyectos y funcionó perfectamente, muy recomendable.
Debe colocar el formulario dentro de cada nodo y usar ng-show y ng-hide para habilitar y deshabilitar la edición, respectivamente. Algo como esto:
<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>
Los puntos clave aquí son:
- He cambiado los controles
ng-modelal ámbito local. - Se agregó
ng-showa laformpara que podamos mostrarlo mientras editamos - Se agregó un
spancon unng-hidepara ocultar el contenido mientras se edita. - Se agregó un
ng-click, que podría estar en cualquier otro elemento, que cambia laeditingatrue - Se cambió
ng-submitpara cambiar laeditingafalse
Aquí está su Plunker actualizado .
Estaba buscando una solución de edición en línea y encontré una plunker que parecía prometedora, pero no funcionó para mí fuera de la caja. Después de algunos retoques con el código lo puse funcionando. Felicitaciones a la persona que hizo el esfuerzo inicial para codificar esta pieza.
El ejemplo está disponible aquí http://plnkr.co/edit/EsW7mV?p=preview
Aquí va el código:
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''
};
});
Plantilla directiva:
<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>
Para usarlo solo agrega agua:
<div ng-repeat="todo in todos"
inline-edit="todo.title"
on-save="updateTodo($index)"
on-cancel="cancelEdit(todo.title)"></div>
ACTUALIZAR:
Otra opción es usar el Xeditable readymade para AngularJS:
He modificado su plunker para que funcione a través angular-xeditable :
http://plnkr.co/edit/xUDrOS?p=preview
Es una solución común para la edición en línea: usted crea hipervínculos con editable-text directiva de editable-text que alterna en la etiqueta <input type="text"> :
<a href="#" editable-text="bday.name" ng-click="myform.$show()" e-placeholder="Name">
{{bday.name || ''empty''}}
</a>
Para la fecha utilicé editable-date directiva de editable-date que cambia a html5 <input type="date"> .