我有一个嵌套的
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上加载第二列,其中包含有评论的电话信息.这完全没问题.
删除(不工作) – 我对删除评论有疑问.我不想删除整个手机对象,而只是删除特定的注释.我可以通过像???
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,我在尽可能多地寻找解决方案后问这个问题.谢谢你的帮助.
解决方法
除其他外,您可以执行以下操作：
$scope.remove = function (index,comments) {
delete $scope.comments[index]
}
仔细检查后,您似乎有一个嵌套的数据结构,这意味着您需要两个索引：一个用于电话,另一个用于电话数据结构中的注释.
所以你需要的是一种方法：
$scope.remove = function (pIndex,cIndex) {
delete $scope.phones[pIndex].phone_comments[cIndex];
}
我提出的另一个建议是,你应该把手机变成一流的公民模型并通过服务来操纵它们.