angularjs ng-repeat array index

Question

How to print (based on array index) all array value?

At the moment, it print all the values.

<table>
    <thead>
       <tr>
           <td>Name</td>
           <td>Designation</td>
           <td>Total Credit Amount</td>
           <td>Total Debit Amount</td>
           <td>Related Companies</td>
       </tr>
    </thead>
    <tbody>
       <tr ng-repeat="data in relTransactions track by $index">
          <td>{{data.name}}</td>
          <td>{{data.designation}}</td>
          <td>{{data.total_credit_amount}}</td>
          <td>{{data.total_debit_amount}}</td>
          <td>
              <button ng-click="openViewMore()">View More</button>
          </td>
       </tr>
    </tbody>
</table>

I try to get array value based on id but i got all array value in that table how i fix that

Describe the problem. "It doesn't work" is not a problem statement. Tell us what the expected behavior should be. Put a brief summary of the problem in the title of your question. — georgeawg
– georgeawg, Commented Mar 1, 2017 at 13:51
let say suppose i have 4 view more button each have different response in array if i click 1st view more then i need to print 1st array respone only. now it print all array valu — Develop
– Develop, Commented Mar 1, 2017 at 14:06

Mistalis · Accepted Answer · 2017-03-01 16:18:58Z

As I understand from your comments, You want to show data of array only when Somebody clicks 'view more' of that array Item.

You can use ng-show based on $index. On clicking view more , change expanded index via functional call. I have written a small example have a look below.

Try on CodePen

  <html>

  <body ng-app>
        <h1>Click on view More below </h1>
    <div id="main" ng-app ng-controller="appController">
        <div ng-repeat="data in arr track by $index">
            <input type='button' value="View more" ng-click="showMore($index)"/> 
            <spna>item {{ $index }}</span>
            <span ng-show='expanded == $index'>{{data.name}}</span>
            <br><br>
            </div>
</div>

 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>    
  </body>
</html>

In your controller:

function appController($scope){
    $scope.arr = [ {name:'one'},{name:'two'},{name:'three'}];

    $scope.showMore = function(i)
    {
        $scope.expanded = i;
    }
}

Sachila Ranawaka · Accepted Answer · 2017-03-01 14:12:28Z

0

if you want access the array object inside the openViewMore then pass the index as parameter and access array like this.

<button ng-click="openViewMore($index)">View More</button> 
$scope.openViewMore = function(index) {
    console.log($scope.relTransactions[index])
}

OR you can pass the object as parameter to the function.

<button ng-click="openViewMore(data)">View More</button> 
$scope.openViewMore = function(data) {
    console.log(data)
}

answered Mar 1, 2017 at 14:12

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

4 Comments

Develop Over a year ago

it print all value in that

Develop Over a year ago

<table class="table table-striped table-responsive"> <tbody ng-repeat="(key, value) in relTransactions by index"> <tr ng-repeat="cList in value.relatedCompaniesList"> <td>{{cList.company_name}}</td> <td>{{cList.total_debit_amount}}</td> <td>{{cList.total_credit_amount}}</td> </tr> </tbody> </table>

Develop Over a year ago

Sorry this is my table

Sachila Ranawaka Over a year ago

@Develop so when do you call openViewMore method inside table

Collectives™ on Stack Overflow

angularjs ng-repeat array index

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related