编辑内容内容编辑 [英] Edit In Place Content Editing
本文介绍了编辑内容内容编辑的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在使用 ng-repeat 时，能够编辑内容的最佳方式是什么？ 理想情况下，加上生日是一个超级链接，当它被点击时，它会显示一个编辑表单 - 与更新按钮的当前添加表单一样。
HTML：
$ b
<！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 =birthdayToDong-controller =main>
< div id =wrap>
<！ - 开始页面内容 - >
< div class =container>
< div class =page-header>
< h1>生日提醒< / h1>
< / div>
< ul ng-repeat =bday in bdays>
< li> {{bday.name}} | {{bday.date}}< /锂>
< / ul>
< form ng-show =visibleng-submit =newBirthday（）>
< label>名称：< / label>
< input type =textng-model =bdaynameplaceholder =Nameng-required />
< label>日期：< / label>
< input type =dateng-model =bdaydateplaceholder =Dateng-required />
< br />
< button class =btntype =submit>储存< /按钮>
< / form>
< / div>
< div id =push>< / div>
< / div>
< div id =footer>
< div class =container>
< a class =btnng-click =visible = true>< i class =icon-plus>< / i>添加< / a>
< / div>
< / div>
< / body>
App.js：
var app = angular.module（'birthdayToDo'，[]）;
app.controller（'main'，function（$ scope）{
//开始为不可见，但当按钮被点击时，它将显示为真
$ scope.visible = false;
//创建数组以保存生日列表
$ scope.bdays = [];
//创建函数将数据推送到bdays数组
$ scope.newBirthday = function（）{
$ scope.bdays.push （{name：$ scope.bdayname，date：$ scope.bdaydate}）;
$ scope.bdayname ='';
$ scope.bdaydate ='';
};
}）;
解决方案
code> ng-show 和 ng-hide 分别启用和禁用编辑。像这样：
< li>
< span ng-hide =editingng-click =editing = true> {{bday.name}} | {{bday.date}}< /跨度>
< form ng-show =editingng-submit =editing = false>
< label>名称：< / label>
< input type =textng-model =bday.nameplaceholder =Nameng-required />
< label>日期：< / label>
< input type =dateng-model =bday.dateplaceholder =Dateng-required />
< br />
< button class =btntype =submit>储存< /按钮>
< / form>
< / li>
这里的关键点是：
- 我已经将控件
ng-model更改为本地范围 - 添加了
ng-show至表单，因此我们可以在编辑时显示它 - 添加了
span用ng-hide隐藏编辑的内容 - 添加一个
ng-click，可以在任何其他元素中切换编辑为true
- 更改
ng-submit切换编辑为false
- 更改
这是您的更新了Plunker 。
When using ng-repeat what is the best way to be able to edit content?
In my ideal situation the added birthday would be a hyperlink, when this is tapped it will show an edit form - just the same as the current add form with an update button.
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 = '';
};
});
解决方案
You should put the form inside each node and use ng-show and ng-hide to enable and disable editing, respectively. Something like this:
<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>
The key points here are:
- I've changed controls
ng-modelto the local scope - Added
ng-showtoformso we can show it while editing - Added a
spanwith ang-hideto hide the content while editing - Added a
ng-click, that could be in any other element, that toggleseditingtotrue - Changed
ng-submitto toggleeditingtofalse
Here is your updated Plunker.
这篇关于编辑内容内容编辑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
