Menu
I have an onClick angularjs function do some binding and has a for loop. my problem is that the for loop does not work in first click. but in second its ok. how can i fix it? in my app i have an array of students firstname= fname, lastname=lname, and tuitions. i want when i click on student name, the program show students fullname, and list of his or her tuitions.
HTML:
<li ng-repeat="x in stdNames" class="text-center">
<a ng-cloak ng-click="showStuInfo($index)" href="#stu-info">{{ x.fname + ' ' + x.lname}}</a>
</li>
//result box (in another page - loading by router )
<section class="stuInfoBox clear">
<div class="nameRow clear">
<p class="text-right pull-right">Name</p><p class="text-right pull-right stu-fullname" ng-bind="studentName"></p>
</div>
<div class="tuitionsRow clear">
<ul class="stuTuitionList">
</ul>
</div>
</section>
JavaScript (AngularJS Controller):
//Students array
$scope.stdNames = [
{ stuId: "s01", fname: 'Mina', lname: 'Ghorbani', tuitions:['Javascript Programming','AngularJs','JQuery','C# Programming']};
//onclick function
$scope.showStuInfo = function (index) {
$(".stuTuitionList li").remove();
$scope.studentName = $scope.stdNames[index].fname + " " + $scope.stdNames[index].lname;
var tuitionsLength = $scope.stdNames[index].tuitions.length;
for (var i = 0; i < tuitionsLength; i++) {
$(".stuTuitionList").append("<li>"+$scope.stdNames[index].tuitions[i]+"</li>");
}
}
360
asked Dec 02 '25 10:12
I've created a sample app with your example. It is working fine here, for the first time the click is getting initialised. Check the below.
var app = angular.module('sample', []);
app.controller('samplecontroller', function($scope) {
//Students array
$scope.stdNames = [{
stuId: "s01",
fname: 'Mina',
lname: 'Ghorbani',
tuitions: ['Javascript Programming', 'AngularJs', 'JQuery', 'C# Programming']
}];
//onclick function
$scope.showStuInfo = function(index) {
$(".stuTuitionList li").remove();
$scope.studentName = $scope.stdNames[index].fname + " " + $scope.stdNames[index].lname;
var tuitionsLength = $scope.stdNames[index].tuitions.length;
for (var i = 0; i < tuitionsLength; i++) {
$(".stuTuitionList").append("<li>" + $scope.stdNames[index].tuitions[i] + "</li>");
}
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="sample">
<div ng-controller="samplecontroller">
<li ng-repeat="x in stdNames" class="text-center">
<a ng-cloak ng-click="showStuInfo($index)" href="#stu-info">{{ x.fname + ' ' + x.lname}}</a>
</li>
//result box (in another page - loading by router )
<section class="stuInfoBox clear">
<div class="nameRow clear">
<p class="text-right pull-right">Name</p>
<p class="text-right pull-right stu-fullname" ng-bind="studentName"></p>
</div>
<div class="tuitionsRow clear">
<ul class="stuTuitionList">
</ul>
</div>
</section>
</div>
</body>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
