Click an array element, show the element with the same index of another array

Question

I have a list of elements which is plotted via a ng-repeat and I am using a ng-click to get the index of the element of the array I am clicking on.

This is the html code:

<ul>
  <li ng-repeat="period in periodPercentage" ng-click="getIndex('{{period}}')">
    {{period}}
  </li>
</ul>

And this is what is inside the controller:

$scope.periodPercentage = ['a', 'b', 'c', 'd'];
$scope.getIndex = function(period) {
  console.log($scope.periodPercentage.indexOf(period));
};

In another part of the code, I am using again an ng-repeat to show the elements of another array with the same length.

<ul>
  <li ng-repeat="ratio in ratioPercentage">
    {{ratio}}
  </li>
</ul>

Is there a way to show only the {{ratio}} with the same index of {{period}} via ng-show and hide the other ones?

Thanks in advance for your replies!

I am going to update my question, but the way is plotted is the same — d_z90
– d_z90, Commented Sep 6, 2016 at 8:36

Rahul Giradkar · Accepted Answer · 2016-09-06 08:49:53Z

3

It may help you.

<div ng-app ng-controller="testrahul">
<ul>
  <li ng-repeat="(i,period) in periodPercentage" ng-click="getindex(i)">
    {{period}}
  </li>
</ul>

function testrahul($scope) {
$scope.periodPercentage = ['a', 'b', 'c', 'd'];
$scope.getindex = function(i){
    console.log(i);
}}

answered Sep 6, 2016 at 8:49

Rahul Giradkar

1,8181 gold badge18 silver badges29 bronze badges

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

Comments

daniel · Accepted Answer · 2016-09-06 08:45:20Z

1

You could do that:

<li ng-repeat="period in periodPercentage" ng-click="getindex($index)">
    {{period}}
</li>

and

<ul>
  <li ng-repeat="ratio in ratioPercentage" ng-show="$index == findex">
    {{ratio}}
  </li>
</ul>

see updated fiddle

edited Sep 6, 2016 at 8:45

answered Sep 6, 2016 at 8:36

daniel

1,1623 gold badges16 silver badges34 bronze badges

1 Comment

d_z90 Over a year ago

Thanks, but this is not adding anything to my previous code. Maybe could you edit your answer?

Amygdaloideum · Accepted Answer · 2016-09-06 08:46:24Z

1

Something along the lines of:

<ul>
  <li ng-repeat="period in periodPercentage" ng-click="setvariable($index)">
    {{period}}
  </li>
</ul>

<ul>
  <li ng-repeat="ratio in ratioPercentage" ng-show="someVariable == $index">
    {{ratio}}
  </li>
</ul>


function setVariable(index){ $scope.someVariable = index;}

answered Sep 6, 2016 at 8:46

Amygdaloideum

5,2232 gold badges16 silver badges16 bronze badges

Comments

Cyril Cherian · Accepted Answer · 2016-09-06 08:54:39Z

1

One solution is this:

  $scope.periodPercentage = ['a', 'b', 'c', 'd'];
  $scope.ratePercentage = ['arate', 'brate', 'crate', 'drate'];
  $scope.rateShowPercentage = angular.copy($scope.ratePercentage);
  $scope.update = function(index){
    $scope.rateShowPercentage  = [$scope.ratePercentage[index]];
  }

In the HTML

<div ng-controller="GreetingController">
<ul >
  <li ng-repeat="period in periodPercentage" ng-click="update($index)">
    {{period}}
  </li>
</ul>

<ul >
  <li ng-repeat="rate in rateShowPercentage" >
    {{rate}}
  </li>
</ul>
</div>

working code here

answered Sep 6, 2016 at 8:54

Cyril Cherian

32.4k7 gold badges48 silver badges57 bronze badges

Comments

jmachnik · Accepted Answer · 2016-09-06 08:38:08Z

0

Somehing like:

<ul>
  <li ng-repeat="object in list" ng-click="openOther($index)">
    {{object.data}}
  </li>
</ul>

<ul>
  <li ng-repeat="object in otherListToShow">
    {{object.data}}
  </li>
</ul>

and:

var otherList = [ some data ...]
 var otherListToShow = []

openOther(index){
listToShow.push(otherList[index])
}

edited Sep 6, 2016 at 8:38

answered Sep 6, 2016 at 8:37

jmachnik

1,1209 silver badges19 bronze badges

1 Comment

Amygdaloideum Over a year ago

You should use the $index variable!

zeeshan Qurban · Accepted Answer · 2016-09-06 08:40:30Z

0

you need to give $index into ng-click

 <ul>
 <li ng-repeat="period in periodPercentage" ng-click="getIndex('{{$index}}')">
  {{period}}
</li>

answered Sep 6, 2016 at 8:40

zeeshan Qurban

3871 gold badge4 silver badges15 bronze badges

1 Comment

d_z90 Over a year ago

Thanks, that's an easier way to get the index, thanks. But how do I ng-show it in the other array?

Collectives™ on Stack Overflow

Click an array element, show the element with the same index of another array

6 Answers 6

Comments

1 Comment

Comments

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

1 Comment

Comments

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related