如何使用AngularJS

Question

我有一個嵌套JSON構造這樣刪除（拼接）從嵌套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和我，m具有尋找解決方案，盡我所能後問這個。謝謝你的幫助。

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

[編輯] *

見工作演示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>