How to pass different id's while using ng-repeat to an ng-click function

Question

This is my HTML code.In this i am taking multiple values from ng-repeat and for each value i want the respective button to show and hide two div elements.In my web page , the buttons from different member blocks are working to show/hide only the first member block... The button with id=round should toggle btw div elements with id= first and id= second for all members that i get through ng-repeat.

 <section id="team">
  <div ng-controller="teamController as tctrl">
   <div class="container">
    <div class="row">
     <div class="col-md-3 bord" ng-repeat="member in tctrl.members">
      <button id="round" ng-click="showHide($index)">
        <img id="direction" src="img/icon/uparrow.png">
      </button>
      <img ng-src="{{member.image}}">
      <div id="first" class="memberabout" >
        <h3 ng-bind="member.title"></h3>
        <h2 ng-bind="member.name"></h2>     
      </div>            
      <div id="second" class="hid" >
        <p ng-bind="member.about"></p>
      </div>
     </div>
    </div>
   </div>
  </div>
 </section>

and this is the js function i am trying to use:

$scope.showHide = function(index) {
    if (document.getElementById('first') !== undefined) {
     if (document.getElementById('first').style.display == 'none') {
        document.getElementById('first').style.display = 'block';
        document.getElementById('second').style.display = 'none';
        var down = document.getElementById('round');
        down.style.top = "201px";
        var direction = document.getElementById('direction');
        direction.src = 'img/icon/uparrow.png';
      } else {
        document.getElementById('first').style.display = 'none';
        document.getElementById('second').style.display = 'block';
        var down = document.getElementById('round');
        down.style.top = "71px";
        var direction = document.getElementById('direction');
        direction.src = 'img/icon/arrowdown.png';
      }
     }
   };

How should I pass the id's so that each button works to show/hide the div elements in their block?

Can you type question clearly and so I can help? Not getting your question properly — Ron
This part is confusing > But since i am using the id , all the buttons are working to show/hide only the first element. — Ron
Instead of doing id="first", you could do something like, e.g., id="member-{{index}}", so that each element gets a unique ID after the repeat runs. — cjl750

Maher Maher · Accepted Answer · 2018-02-18T06:54:18

Angularjs has many options to cancle using jQuery in your applications; options like modeling, directive and etc...

In your case you didn't need to use id because when we use ng-repeat in fact all of items are unique, so we just use them to show/hide or many other option you can do with object in the ng-repeat.

I hope this sample helps you to figure out how to use it:

var app = angular.module("app", []);

app.controller("ctrl", function($scope) {
  var main = this;

  main.members = [{
      image: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR4f5PCRqcMgg_KHymC29ABsy-PDFI08mb6qHqMviqbDDHjjuYM9g",
      title: "A",
      name: "jack",
      about: "Hello World"
    },
    {
      image: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQAxySZHmSrUU1_iIFJHGdDTdmTCAE610QnPwptWGWbMRAbSUzgNA",
      title: "B",
      name: "philip",
      about: "Hello World 2"
    }
  ];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<div ng-app="app" ng-controller="ctrl as tctrl">
  <section id="team">
    <div class="container">
      <div class="row">
        <div class="col" ng-repeat="member in tctrl.members">
          <small>this is unique id if you want to use it: <b>id_{{$index}}</b> </small>
          <div class="card">
          <button ng-click="member.show = !member.show">
                        show/hide
                    </button>
          <img ng-src="{{member.image}}">
          <div ng-hide="member.show">
            <h3 ng-bind="member.title"></h3>
            <h2 ng-bind="member.name"></h2>
          </div>
          <div ng-show="member.show">
            <p ng-bind="member.about"></p>
          </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>

How to pass different id's while using ng-repeat to an ng-click function

1 Answers