AngularJS按索引過濾ng-repeat？

Question

我在循環中有一個表格和按鈕，此圖顯示了根據搜索得到的結果

html

     <div class="col-sm-4" ng-repeat="x in names">
        <div class="panel panel-primary"  id= "{{ x.myIndex }}" >
            <div class="panel-heading">
              <h3 class="panel-title">{{ x.ID }} {{ x.Name }}
      <button ng-click="showCommentsWithID(x.ID)"  style="float: right;" class="btn btn-xs btn-primary glyphicon glyphicon-comment"> 42</button>

                </h3>
                </div>
        <div class="panel-body">

     <table width="" border="0" ng-repeat="c in comments"  id= "{{ c.ID}}" ">
                      <tr>
                        <td width="30">{{ c.ID }}</td>
                        <td >{{ c.Comment}}</td>
                      </tr>
      </table>

        </div>
          </div>
          </div><!-- /.col-sm-4 -->

js

function ContactController($scope,$http) {
$scope.showCommentsWithID= function(myID) { 
                    var page = "mySQL.php?func=getComments&id=" + myID;
                    $http.get(page).success(function(response) {$scope.comments = response;});
        }
}

當我單擊評論按鈕時，我想根據該ID顯示評論。 除了將注釋加載到所有表而且不僅加載到具有正確ID的表上之外，此方法都工作正常。 在此示例中，我單擊了ID 1可口可樂。

我需要在哪里應用js或html過濾器？ 都？ ...

！[在此處輸入圖片描述] [3] stack.imgur.com/gqyPR.jpg

Answer 1

您只需將comments與產品ID綁定在一起，以使其對每個產品都是唯一的。

我們需要做的是將產品的ID添加到$scope.comments ，如下所示：

function ContactController($scope,$http) {
        $scope.comments = {}; // Init comments object.
        $scope.showCommentsWithID= function(myID) { 
                    var page = "mySQL.php?func=getComments&id=" + myID;
                    $http.get(page).success(function(response) {$scope.comments[myID] = response;});
        }
}

然后，您可以簡單地遍歷它：

 <table width="" border="0" ng-repeat="c in comments[x.ID]"  id= "{{ c.ID}}" ">
     <tr>
         <td width="30">{{ c.ID }}</td>
         <td >{{ c.Comment}}</td>
     </tr>
 </table>