使用角度xeditable编辑阵列
Edit arrays using angular-xeditable
我使用ngResource从api中提取一些对象,然后在表中显示它们。没关系。当我试图使用angular xeditable使"tags"属性可编辑,但被视为字符串,并且angular xeeditable上没有类似"ngList"的东西时,问题就来了。我能想到的唯一解决方案是在我的服务上将"tags"属性序列化为"tagsString",并在调用$save()后取消序列化。。还有更优雅的解决方案吗?
对象:
{
"id": "yP8",
"uploadDate": "2012-10-03T12:52:59-0300",
"statusChangeDate": "2012-10-03T12:52:59-0300",
"status": 0,
"type": 1,
"mimeType": "JPEG",
"title": "title-36868",
"tags": [
'some-tag',
'fancy-tag'
],
"language": "en",
"interactions": {
"likes": 12371,
"dislikes": 15,
"comments": 81
},
"published": true
}
控制器:
app.controller( 'ContentsCtrl', function CommentsCtrl( $scope, Contents ) {
$scope.contents = Contents.query();
});
模板:
<tr ng:repeat="content in contents.content">
<td>{{content.id}}</td>
<td ng:click="content.images.showFull=!content.images.showFull">
<img src="{{content.images.thumbnail.url}}" ng:show="!content.images.showFull">
<img src="{{content.images.medium.url}}" ng:show="content.images.showFull">
</td>
<td>{{content.status}}</td>
<td>
<span editable-text="content.title" e-required>{{content.title}}</span>
</td>
<td>
<span editable-text="content.tags">{{content.tags}}</span>
</td>
<td>{{content.language}}</td>
</tr>
编辑:
演示(Sebastian Gärtner著):http://plnkr.co/edit/ttPNgHXUZKmaJZ9IuB2N?p=preview
用另一个指令来解决它怎么样。不带xeditable。
喜欢:http://decipherinc.github.io/angular-tags/
您确实希望标记可编辑吗?你想要什么输入机制?
对标签进行另一次ng重复,使它们成为一个单独的输入字段,也许还有一个添加和删除标签的机制。
您可以执行以下操作:
<div ng-repeat="tag in content.tags track by $index">
<span editable-text="content.tags[$index]">{{tag}}</span>
</div>
诀窍是用可编辑文本指令连接正确的模型值(在这种情况下使用$index迭代器)。
角度x可编辑页面上的可编辑表示例几乎实现了这一点。通过将列表中的每个字符串包装在一个对象中,您可以对其应用任意属性-在这种情况下,是临时值,您可以在onCancel和onBeforeSave处理程序中关闭这些值的保存/删除功能。
对象:
{
tags: [
{name: 'some-tag'},
{name: 'fancy-tag'}
]
};
HTML:
<form editable-form name="tagForm" onBeforeSave="cleanBeforeSave()" onCancel="cleanOnCancel()">
<ul>
<li ng-repeat="tag in contents.tags | filter:filterDeleted">
<span editable-text="tag.name" e-name="name"> {{tag.name}} </span>
<button ng-click="deleteTag($index)" ng-show="tagForm.$visible">x</button>
</li>
</ul>
<span ng-show="tagForm.$visible">
<button type="button" ng-click="addTag()">New</button>
<button type="submit">Save</button>
<button type="button" ng-click="tagForm.$cancel()">Cancel</button>
</span>
<span ng-hide="tagForm.$visible">
<button type="button" ng-click="tagForm.$show()">Edit</button>
</span>
</form>
控制器:
app.controller( 'TagCtrl', function TagCtrl( $scope, Contents ) {
$scope.contents = Contents.query();
$scope.filterDeleted = function(obj) {
return obj.isDeleted !== true;
};
$scope.addTag = function() {
$scope.contents.tags.push({name:"", isNew:true});
};
$scope.removeTag = function(index) {
$scope.contents.tags[index].isDeleted = true;
};
$scope.cleanBeforeSave = function() {
// go backwards, so deleting doesn't mess up i's count
for (var i = $scope.contents.tags.length; i--;) {
var tag = $scope.contents.tags[i];
if (tag.isDeleted) {
$scope.contents.tags.splice(i, 1);
}
if (tag.isNew) {
delete tag.isNew;
}
}
};
$scope.cleanOnCancel = function() {
// go backwards, so deleting doesn't mess up i's count
for (var i = $scope.contents.tags.length; i--;) {
var tag = $scope.contents.tags[i];
if (tag.isDeleted) {
delete tag.isDeleted;
}
if (tag.isNew) {
$scope.contents.tags.splice(i,1);
}
}
};
});
相关文章:
- CKEditor Widget-阻止编辑可编辑元素本身
- 如何在angularJS中编辑时,如果DB中的值为true,则设置复选框,如果值为false,则取消选中复选框
- 高亮显示时编辑文本大小和颜色
- 剑道UI内联编辑:如何在点击其他按钮时隐藏按钮
- 将事件聚焦/模糊在可编辑内容的元素上
- 编辑HTML表的源数据
- ExtJS网格单元格编辑器,防止焦点松动问题
- 如何在visualstudio中调试web api时编辑javascript文件
- 具有所有样式的文本正在复制到可编辑文本区域
- 可以't使用PHP使用Froala编辑器上传图像URL
- 用Greasemonkey编辑专栏
- 如何在corona sdk中从CK编辑器中检索数据
- 基于数据类型的编辑框的汇总列表
- 如何使用jQuery可编辑插件检查ajax是否成功完成
- 错误:[$compile:nonassign]表达式'未定义'与指令'内容可编辑'是不可
- 如何在ng-reeat中使用ng-switch来编辑JSON API数据
- 使用正则表达式捕获“”并分割成阵列
- 如何获取经过编辑的文本
- 使用角度xeditable编辑阵列
- 仅编辑javascript以添加图像阵列中的幻灯片