Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Edit arrays using angular-xeditable

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

like image 615
neiker Avatar asked Dec 04 '13 19:12

neiker


1 Answers

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.

like image 100
Sebastian Gärtner Avatar answered Oct 16 '22 00:10

Sebastian Gärtner