jak usunąć (splice) elementu z zagnieżdżonego JSON za pomocą angularjs

Question

mam zagnieżdżone JSON skonstruowany tak:

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

         } 
        ] 
} 
] 

części wyświetlacza (robót) - ja jestem w stanie wyświetlić obraz telefonu na 1 stole kolumna i na ng-click Wczytuję drugą kolumnę z informacjami o telefonie z komentarzami. Działa to doskonale.

Usunięcie (nie działa) - Mam pytanie dotyczące usuwania komentarzy. Nie chcę usuwać całego obiektu telefonu, ale tylko określone komentarze. Czy mogę przekazać coś takiego ???

remove(comment, $index) 

, a następnie mają funkcję, która wykonuje następujące czynności?

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

Dla porównania, HTML wyglądał:

<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: I zostały eksperymentowanie z angularjs i I m pytaniem to po szukali rozwiązań tyle, ile mogę. Dzięki za pomoc.

Answer 1

Można między innymi wykonać następujące czynności:

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

    delete $scope.comments[index] 
} 

Po bliższym przyjrzeniu wydaje się, że masz tam zagnieżdżoną strukturę danych, co oznacza, że ​​potrzebujesz dwóch indeksów: jednego dla telefonu i jednego dla komentarza w strukturze danych telefonu.

Więc co będzie trzeba to metoda wzdłuż linii:

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

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

Jedna inna sugestia bym wysunął jest, że należy uczynić telefony wzorowym obywatelem pierwszej klasy i manipulować nimi za pośrednictwem serwisu .

Answer 2

Problem, który znalazłem, nazywasz ng-click="remove($index, comment) i przekazujesz 2 argumenty: $index i wybrałeś comment.

Jednak remove metoda działa z index i listy komentarzy

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

Zmień ng-click do:

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

Drugi sposób bez $ indeks:

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

JS

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

[EDIT] *

Zobacz pracuje Demo Plunker

Answer 3

Dziękuję wam obu. Pierwsza sugestia faktycznie zadziałała.

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

i rozmowa z HTML był

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