Редактировать массивы с помощью angular-xeditable

Question

Я извлекаю некоторые объекты из моего API с помощью ngResource и затем показываю их в таблице. Это нормально... проблема возникает, когда я пытаюсь сделать атрибуты тегов редактируемыми с помощью angular-xeditable, но они обрабатываются как строки, и в angular-xeditable нет ничего похожего на "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>

РЕДАКТИРОВАТЬ:

Демо (Себастьян Гертнер): http://plnkr.co/edit/ttPNgHXUZKmaJZ9IuB2N?p=preview

Answer 1

Как насчет решения с другой директивой. Не с xeditable.

Как: http://decipherinc.github.io/angular-tags/

Вы хотите, чтобы теги были редактируемыми? Какой механизм ввода вы хотите иметь?

Как насчет другого ng-repeat для тегов, чтобы каждое из них было единым полем ввода и, возможно, механизм добавления и удаления тегов.

Answer 2

Вы можете сделать что-то вроде следующего:

<div ng-repeat="tag in content.tags track by $index">
    <span editable-text="content.tags[$index]">{{tag}}</span> 
</div>

Хитрость заключается в том, чтобы связать правильное значение модели с помощью директивы editable-text (в этом случае используется итератор $index).

Answer 3

Пример Editable Table на угловой x-editable странице имеет кое-что, что почти достигает этого. Оборачивая каждую строку в вашем списке в объект, вы можете применить к нему произвольные свойства - в этом случае временные значения, которые вы можете отключить или сохранить функциональные возможности в обработчиках 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);
            }
        }
    };
});