How to show specific div onclick in angularjs

Question

I have few div for onclick and few div to show it once onclick,but I want to show only specific div related to particular div.Here my application is working fine,but for 2 different section its repeating,if I click first once fourth div also showing.I have given different function also.Can anyone help me,I am new to angularjs. Below is the code.

HTML

<script  src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>
<script src="app.js"></script>

<body ng-app="plunker" ng-controller="MainCtrl">
  <div ng-repeat="item in items">
    <div style="color:red" ng-click="onClick1($index,0)">first</div>
    <div style="color:blue" ng-show="div_[$index+'_0']">yyy</div>
    <br />
    <hr />
  </div>
  <div ng-repeat="item in items2">
    <div style="color:red" ng-click="test($index,0)">second</div>
    <p style="color:blue" ng-show="div_[$index+'_0']">zzz</p>
    <br />
    <hr />
  </div>
</body>

app.js

  angular.module('plunker', [])
    .controller('MainCtrl', function($scope) {
      $scope.div_=[];
      $scope.items = [
        {
        // id: 1,
          title: "first item"
        },
        {
        // id: 2,
          title: "second item",
        },
        {
        // id: 3,
          title: "third item",
        }
      ];
      $scope.items2 = [
        {
          id: 5,
          title: "first item 1"
        },
        {
          id: 6,
          title: "second item 2",
        },
        {
          id: 7,
          title: "third item 3",
        }
      ];
      $scope.onClick1 = function (indexa, row1){
        alert('first');
        $scope.div_[indexa+'_'+row1]=true;
      }
      $scope.test = function (indexb, row2){
        $scope.div_[indexb+'_'+row2]=true;
      }
    });

Can you please rephrase the question? I don't understand it.. — Pankaj Parkar
– Pankaj Parkar, Commented Jun 19, 2018 at 18:02
here my requirement is to show specific related div When I click a div.But here the issue is when I click first div of first section,first div of second section is also showing.just run the above code and click div one by one you can able to understand — A prasad
– A prasad, Commented Jun 19, 2018 at 18:17

Alyson Maia · Accepted Answer · 2018-06-19 18:50:24Z

1

You are using the same variable to show/hide the div's, you've already built something to work around this, but is not using. Try this:

<div style="color:red" ng-click="test($index, 1)">second</div>
<p style="color:blue" ng-show="div_[$index+'_1']">zzz</p>

The div_[$index+'_0'] is now div_[$index+'_1'] And test($index, 0)must be test($index, 1)

edited Jun 19, 2018 at 18:50

answered Jun 19, 2018 at 18:31

Alyson Maia

8105 silver badges14 bronze badges

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

3 Comments

A prasad Over a year ago

I have modified but if I click now on 'second' I mean fourth div,nothing is showing,it should show 'zzz'

Alyson Maia Over a year ago

the test($index, 0) must be test($index, 1)

Alyson Maia Over a year ago

Hey, could you mark the answer as correct? It helps a lot! :)

Collectives™ on Stack Overflow

How to show specific div onclick in angularjs

HTML

app.js

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

HTML

app.js

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related