CODEWITHSUNDEEP
javascripthtmlangularjsarrays
d_z90
d_z90

Reputation: 1263

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

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!

Upvotes: 0

Views: 140

Answers (6)

Cyril Cherian
Cyril Cherian

Reputation: 32327

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

Upvotes: 1

Rahul Giradkar
Rahul Giradkar

Reputation: 1818

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

Upvotes: 3

Amygdaloideum
Amygdaloideum

Reputation: 4873

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

Upvotes: 1

daniel
daniel

Reputation: 1162

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

Upvotes: 1

zeeshan Qurban
zeeshan Qurban

Reputation: 387

you need to give $index into ng-click 

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

Upvotes: 0

jmachnik
jmachnik

Reputation: 1120

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

Upvotes: 0

Related Questions