Javascript 使用角度可编辑数组

我使用NGAN资源从api中提取一些对象，然后在表中显示它们。没关系。。当我尝试使用angular xeditable使“tags”属性可编辑，但将其视为字符串，并且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
}

{
    tags: [
        {name: 'some-tag'},
        {name: 'fancy-tag'}
    ]
};

控制器：

app.controller( 'ContentsCtrl', function CommentsCtrl( $scope, Contents ) {
    $scope.contents = Contents.query();
});

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);
            }
        }
    };
});

模板：

<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>

{{content.id}
{{content.status}
{{content.title}
{{content.tags}
{{content.language}

编辑：

演示（Sebastian Gärtner）：

---

用另一个指令解决它怎么样。不支持xeditable

比如：

是否要使标记处于可编辑状态？ 你想要什么输入机制

---

对标记进行另一次ng重复，使其成为单个输入字段，可能是添加和删除标记的机制。

您可以执行以下操作：

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

{{tag}}

诀窍是用可编辑文本指令（在本例中使用$index迭代器）连接正确的模型值。

角度x-可编辑页面上的几乎可以实现这一点。通过将列表中的每个字符串包装到对象中，您可以对其应用任意属性—在本例中是临时值，您可以在onCancel和onBeforeSave处理程序中将其保存/删除功能设置为关闭

对象：

{
    "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
}

{
    tags: [
        {name: 'some-tag'},
        {name: 'fancy-tag'}
    ]
};

HTML:

---

你能用JSFIDLE连接一个例子吗？Contents.query（）看起来像一个承诺。如果是，这将在Angular的较新版本中打破，因为它不再自动展开承诺供参考。您可以提交Angular xeditable的增强功能，或者更好的拉请求；）为了解决这个问题并达到最后期限，我现在使用ng标签输入和ng:show。。。。但是我正在寻找一个更好的解决方案。这还不包括添加/删除操作