I pull some objects from my api using ngResource an then I show them in a table. Thats ok.. the problem become when I try to make 'tags' attribute editable using angular-xeditable but are treated as string and there isn't something like "ngList" on angular-xeditable. The only solution I can think of is serialize that "tags" attribute to "tagsString" on my service and unserialize it once $save() was called.. there is a more elegant solution?
Object:
{
"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
}
Controller:
app.controller( 'ContentsCtrl', function CommentsCtrl( $scope, Contents ) {
$scope.contents = Contents.query();
});
Template:
<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>
EDIT:
Demo (by Sebastian Gärtner): http://plnkr.co/edit/ttPNgHXUZKmaJZ9IuB2N?p=preview
What about solving it with another directive. Not with xeditable.
Like: http://decipherinc.github.io/angular-tags/
You do want to have the tags editable? What input mechanism do you want to have?
What about another ng-repeat for the tags to make them each an single input field and maybe an mechanism for add and delete tags.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With