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, Feb 03 '15 at 02:23
yes but I need when I click the alert me button it should display what is their parent index. I — Mary, Feb 03 '15 at 02: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, Feb 03 '15 at 02: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, Feb 03 '15 at 02: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, Feb 03 '15 at 02:42
i dint say alert(0) did i? :D i said `ng-click="alertMe(0)"` and `ng-click="alertMe(1)"` and in your controller method do alert(key) — PSL, Feb 03 '15 at 02:47
@PSL mean you pass in html, for alertMe function in js, you just alert(key), why don't you change the json into one array? — huan feng, Feb 03 '15 at 02:48
@huanfeng can you help me how can I change my json into one array? — Mary, Feb 03 '15 at 02:56

score 2 · Accepted Answer · edited May 23 '17 at 12:10

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 '17 at 12:10

Community

1
1

answered Feb 03 '15 at 03:00

David Williams

229
2
10

Thank you so much @David Williams. Your answer is what I need. – Mary Feb 03 '15 at 03:06
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? – Mary Feb 03 '15 at 03:25
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`. – David Williams Feb 03 '15 at 03:53
OMG I think it's tough lol. I will try to convert them in objects. Thank you for your help. – Mary Feb 03 '15 at 04:02
I already convert my Section A and Section B in objects. http://jsfiddle.net/e4toyd6j/ – Mary Feb 03 '15 at 07:14
THe code is not working on mine. Am I missing something? – Mary Feb 03 '15 at 07:15
Your fiddle is lacking javascript. – David Williams Feb 03 '15 at 07:17
Yeah it looks fine. If it's not working, it'll be something in your controller. – David Williams Feb 03 '15 at 07:25
This is the updated fiddle. The fiddle is not running. I just want to show you how I convert my array to object. Please check :-) http://jsfiddle.net/DharkRoses/7kLo51v7/ – Mary Feb 03 '15 at 07:28
1

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. – David Williams Feb 03 '15 at 07:43

get parent index of array in angularjs

1 Answers1