2014-12-13 2 views
0

У меня есть таблица и кнопки внутри цикла, эта картина показывает результаты того, что я получаю в зависимости от категорииФильтр AngularJS ng-repeat по индексу?

enter image description here

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 1 Coka Cola. enter image description here

Где я должен применять фильтр js или html? и то и другое? ...

! [Введите описание изображения здесь] [3] stack.imgur.com/gqyPR.jpg

ответ

2

Вы можете просто связать ваш comments с идентификатором вашего продукта, чтобы сделать его уникальным для каждого продукта.

Что нам нужно сделать, это добавить идентификатор продукта в $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> 
+0

спасибо за ваш ответ, да, мой $ scope.names выглядит так, но, к сожалению, он не работает. Нужно ли мне расширять $ scope.names с параметром comment? hmmm –

+0

См. мой отредактированный ответ. Это будет работать так, как вы хотели. – lvarayut

+0

Я думаю, что все еще есть небольшая ошибка, когда я нажимаю кнопку, я до сих пор не получаю результатов –

Смежные вопросы