CODEWITHSUNDEEP
htmlangularjs
Mary
Mary

Reputation: 123

get parent index of array in angularjs

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>

Upvotes: 1

Views: 4621

Answers (1)

David Williams
David Williams

Reputation: 229

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.

Upvotes: 2

Related Questions