如何使用 AngularJS 从嵌套 JSON 中删除（拼接）元素

Question

我有一个这样的嵌套 JSON：

[{
"phone_id" : "1",
"phone_name" : "nokia",
"phone_img" : "/src/imgs/nokia.jpg",
"phone_comments" :
    [
                        {
                            "comment_id" : "1",
                            "user_id" : "32508",
                            "comment_date" : "2001-02-01",
                            "user_comment" : "This was the first phone that was rock solid from Nokia"

                        }, 
                        {
                            "comment_id" : "2",
                            "user_id" : "32518",
                            "comment_date" : "2001-02-02",
                            "user_comment" : "Great phone before the smartphone age"

                        },
                        {
                            "comment_id" : "3",
                            "user_id" : "22550",
                            "comment_date" : "2002-04-01",
                            "user_comment" : "Reminds me of my grandpa's phone"

                        },
                        {
                            "comment_id" : "4",
                            "user_id" : "31099",
                            "comment_date" : "2001-05-11",
                            "user_comment" : "It was a crappy one!"

                        }
                    ]
}
]

显示部分（工作） - 我可以在第一个表格列上显示手机图像，并在 ng-click 上加载第二列，其中包含有关带有 cmets 的手机的信息。这工作得很好。

删除（不起作用） - 我对删除 cmets 有疑问。我不想删除整个电话对象，而只删除特定的 cmets。我可以通过类似???

remove(comment, $index) 

然后有一个执行以下操作的函数？

$scope.remove = function (index, comments) {
    alert(comments.user_comment + index);
    $scope.comments.splice(index, 1);
}

作为参考，HTML 看起来像：

<div ng-app="angularJSApp">
    <div ng-controller="PhoneCtrl">
        <br/><br/><br/>
        <table width="100%" border="1">
            <tr ng-repeat="ph in phones">
                <td width="20%"><a href="#" ng-click="showComments = ! showComments"><img width="50%" ng-src="{{ph.phone_img}}"></a></td>
                <td>
                    <p>Phone Id: {{ph.phone_id}}</p>
                    <p>Phone Name: {{ph.phone_name}}</p>
                    <p>Number of comments: {{ph.phone_comments.length}}</p>

                    <div class="shComments" ng-show="showComments">
                        <p>Search: <input ng-model="query"></p>
                        <table border="1" width="100%">
                            <thead>
                                <tr>
                                    <th><a href="" ng-click="predicate = 'comment_id'; reverse = !reverse">Id</a></th>
                                    <th><a href="" ng-click="predicate = 'user_comment'; reverse = false">Comment</a>
                                        (<a href="" ng-click="predicate = '-user_comment'; reverse = false">^</a>)
                                    </th>
                                    <th><a href="" ng-click="predicate = 'comment_date'; reverse = !reverse">Date</a></th>
                                    <th><a href="" ng-click="predicate = 'user_id'; reverse = !reverse">User</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr ng-repeat="comment in ph.phone_comments | filter:query | orderBy:predicate:reverse">
                                    <th>{{comment.comment_id}}
                                    <th>{{comment.user_comment}}</th>
                                    <th>{{comment.comment_date}}</th>
                                    <th>{{comment.user_id}}</th>
                                    <th><button ng-click="remove($index, comment)">Remove Comment</button>
                                </tr>
                            </tbody>
                        </table>
                    </div>                  
                </td>
            </tr>
        </table>
    </div>
</div>

P.S：我一直在尝试使用 AngularJS，我在尽可能多地寻找解决方案后提出这个问题。感谢您的帮助。

Answer 1

除其他外，您可以执行以下操作：

$scope.remove = function (index, comments) {

    delete $scope.comments[index]
}

仔细检查后，您似乎有一个嵌套的数据结构，这意味着您需要两个索引：一个用于电话，一个用于电话数据结构中的评论。

所以你需要的是一种类似以下方法的方法：

$scope.remove = function (pIndex, cIndex) {

    delete $scope.phones[pIndex].phone_comments[cIndex];
}

我提出的另一个建议是，您应该让手机成为一等公民模型，并通过服务对其进行操作。

Answer 2

感谢你们俩。第一个建议确实奏效了。

$scope.removeComment = function (pid, cid) {
    $scope.phones[pid].phone_comments.splice(cid, 1);
};

来自 HTML 的调用是

<th><button ng-click="removeComment($parent.$index, $index)">Remove Comment</button>

Answer 3

我发现您调用 ng-click="remove($index, comment) 并传递 2 个参数的问题：$index 并选择了 comment。

但是，remove 方法适用于 index 和 list 的 cmets

$scope.remove = function (index, comments) {
    alert(comments.user_comment + index);
    $scope.comments.splice(index, 1);
}

将ng-click 更改为：

ng-click="remove($index, ph.phone_comments)

没有$index的第二种方式：

ng-click="remove(comment, ph.phone_comments)

JS

$scope.remove = function(comment, comments) {     
    comments.splice(comments.indexOf(comment), 1);
 };

[编辑]*

查看工作演示 Plunker