get parent index of array in angularjs

Question

I have array of scope.students inside the controller. And the data is shown in my view form using ng-repeat in the table. What I want to do now is when I click the button, it should alert the parent index of the specific object. For example I click the button for 1 Brick Med then it should alert 0 because he is in section A. Then when I click the button in 3 it should alert 1 because he is sectionB. I am really new in angularjs any help is millions appreciated thanks

var stud = angular.module("stud", []);
stud.controller("StudentsController", function ($scope) {
	'use strict';
  
  
    $scope.alertMe = function (key){
     alert(0);
    };  

    $scope.sectionA = [
      {
        no:1,
        name:'Brick Med',
      },
      {
        no:2,
        name: 'Colin Christopher',
      },
    ];
      
     $scope.sectionB = [
      {
        no:3,
        name: 'Frank Joemar Timbang',
      },
      {
        no:4,
        name: 'Curtis Zaymond',
      }
      ];
    
    $scope.students = [
      $scope.sectionA,
      $scope.sectionB
    ];

    	

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html data-ng-app="stud">
<head lang="en">
	<meta charset="utf-8">
	<title>Tally Boxes</title>
</head>
<body data-ng-controller="StudentsController" data-ng-init="init()">
  <div id="container">
   </div>
  <div class="container-table">
    <table border="1" width="100%">
        <thead>
            <tr>
                <td>Students</td>
                <td>Alert</td>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="(key,value) in students[0]">
                <td>{{value.no}} {{value.name}}</td>
              <td><button ng-click="alertMe(key)">Alert me!</button></td>
                 
            </tr>
           <tr ng-repeat="(key,value) in students[1]">
                <td>{{value.no}} {{value.name}}</td>
              <td><button ng-click="alertMe(key)">Alert me!</button></td>
                 
            </tr>
        </tbody>
</table>
</div>

  <script src="angular.min.js"></script>  
  <script src="tallyboxController.js"></script>
  <script src="tallyboxDirective.js"></script>


</body>
</html>

I don't know if this is your final code, but you have the students indexes hard-coded, so when you're calling alertMe, you already know whether the index is 0 or 1. — David Williams
– David Williams, Commented Feb 3, 2015 at 2:23
yes but I need when I click the alert me button it should display what is their parent index. I — Mary
– Mary, Commented Feb 3, 2015 at 2:25
You already have it harcoded like students[0] so you know it is going to be 0 so just pass 0 (and other index respectively) ? — PSL
– PSL, Commented Feb 3, 2015 at 2:28
Hello PSL. How can I pass 0 to my controller, I tried it before but I do not know how to pass it. Can you guide me? — Mary
– Mary, Commented Feb 3, 2015 at 2:30
Okay I edited my code and I add alert in $scope.alertMe(), but when I click the button it all alert 0, what is my mistakes :-( — Mary
– Mary, Commented Feb 3, 2015 at 2:42

Community · Accepted Answer · 2017-05-23 12:10:06Z

2

Your ng-repeat is a bit of a mess, but I'm guessing this is what you want to do:

<tbody ng-repeat="studentGroup in students">
    <tr ng-repeat="student in studentGroup">
        <td>{{student.no}} {{student.name}}</td>
        <td><button ng-click="alertMe($parent.$index)">Alert me!</button></td> 
    </tr>
</tbody>

Note that (key, value) is for when you're iterating over an object's properties, but students is an array.

For the $parent.$index, see Access index of the parent ng-repeat from child ng-repeat

For the tbody ng-repeat see How to use ng-repeat without an html element

You could avoid using $parent.$index by changing the ng-click to alertMe(studentGroup) and $scope.alertMe to

$scope.alertMe = function (studentGroup) {
    alert($scope.students.indexOf(studentGroup));
};

But it depends on your final usage which one you'd prefer.

edited May 23, 2017 at 12:10

CommunityBot

11 silver badge

answered Feb 3, 2015 at 3:00

David Williams

2292 silver badges10 bronze badges

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

10 Comments

Mary Over a year ago

Thank you so much @David Williams. Your answer is what I need.

Mary Over a year ago

What if I want to shows only the sectionA in the table and I want when I click the alert me button again it should still alert its parent index?

David Williams Over a year ago

It really depends on how this will scale. For that specific scenario, you could add ng-show="$first" to the tbody, but that assumes you only ever want to show sectionA. A better way would be to convert SectionA and SectionB into objects, with a property called show and another called students. Then add ng-show="studentGroup.show" and update the inner ng-repeat to use studentGroup.students.

Mary Over a year ago

OMG I think it's tough lol. I will try to convert them in objects. Thank you for your help.

David Williams Over a year ago

You've made candidates an object now, so you want to iterate over it as you were originally with (key, candidateGroup) in candidates, although you can now no longer do candidateGroup.show because candidateGroup (ie. presidents or vicePresidents) are arrays.

|

Collectives™ on Stack Overflow

get parent index of array in angularjs

1 Answer 1

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related