Reputation: 123
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
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