AngularJS filter ng-repeat by index?

Question

I have a table and buttons inside a loop, this picture shows the results of what I get depending on the search

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

When I click on the comment Button I want to display the comments according to that ID. This is working fine except that the comments are loaded to all tables and not only to the table with the right ID. In this example I clicked on ID 1 Coka Cola. enter image description here

Where do I need to apply a filter the js or html? both? ...

![enter image description here][3]stack.imgur.com/gqyPR.jpg

lvarayut · Accepted Answer · 2014-12-13 18:08:45Z

2

You can simply bind your comments with your product's id in order to make it unique for each product.

What we need to do is to add product's id to $scope.comments as following:

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

Then, you can simply loop through it:

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

edited Dec 13, 2014 at 18:08

answered Dec 13, 2014 at 16:13

lvarayut

15.5k17 gold badges65 silver badges89 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Tower Jimmy Over a year ago

thank you for your answer, yes, my $scope.names looks like this, but unfortunately it is not working. Do I need to expand the $scope.names with the comment parameter? hmmm

lvarayut Over a year ago

Please see my edited answer. It would work in the way you wanted.

Tower Jimmy Over a year ago

i think there is still a small mistake, when I click the button I still get no results

lvarayut Over a year ago

Can't you try to change the $scope.comments.myID = response; to $scope.comments[myID] = response;? See this Plunkr, simulation of your situation. Hope that help.

Tower Jimmy Over a year ago

console log says: TypeError: Cannot set property '1' of undefined € I changed as you said. I will look now at your Plunkr example

|

Collectives™ on Stack Overflow

AngularJS filter ng-repeat by index?

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related