как удалить (сращивание) элемент из вложенного JSON с помощью AngularJS

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

         } 
        ] 
} 
] 

дисплейной часть (работа) - я м способен отображать изображение телефона на 1-й таблице столбец и на ng-click Я загружаю второй столбец с информацией о телефоне с комментариями. Это прекрасно работает.

Deletion (not working) - У меня есть вопрос об удалении комментариев. Я не хочу удалять весь телефонный объект, но только конкретные комментарии. Могу ли я передать что-то вроде ???

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

Проблема, о которой вы нашли, что вы звоните ng-click="remove($index, comment) и пропустите 2 аргумента: $index и выбрали comment.

Однако remove метод работает с index и список комментариев

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

Изменение ng-click на:

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

Второй путь без $ Индекс:

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

JS

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

[EDIT] *

См работает демо Plunker

Answer 3

Спасибо вам обоим. Первое предложение действительно сработало.

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