Why ng-repeat is not working?
Question
ng-repeat not working with table,in the output only header part displayed? As i think the binding i did is perfectly fine, but something is there which i am missing? Can anyone help me out where i am doing wrong?
JAVA SCRIPT:
var myapp=angular.module("MyApp",[]); var controller=function($scope) { var technology1=[ {Name: "C#",Likes: 0,Dislikes: 0}, {Name: "JAVA",Likes:0,Dislikes:0}, {Name: "Python",Likes:0,Dislikes:0} ]; $scope.technology=technology1; $scope.incrementLikes=finction(technology) { technology.Likes++; } $scope.discrementLikes=function(technology) { technology.Dislikes++; } } myapp.controller('MyController',controller);
<html ng-app="MyApp"> <head> <title></title> <script src="angular.js"></script> <script src="Day2.js"></script> </head> <Body ng-controller="MyController"> <div > <table border='2'> <thead> <tr> <th>Name Of Technology</th> <th>Likes</th> <th>Dislikes</th> <th>Likes/Dislikes</th> </tr> </thead> <tbody> <tr ng-repeat="tech in technology"> <td>{{tech.Name}}</td> <td>{{tech.Likes}}</td> <td>{{tech.Dislikes}}</td> <td> <input type="button" value="Like" ng-click="incrementLikes(tech)"> <input type="button" value="Dislikes" ng-click="decrementLikes(tech)"> </td> </tr> </tbody> </table> </div> </Body> </html>
4 answers
solution1
0 2016-06-30 20:02:17
Replace this line
$scope.incrementLikes=finction(technology)
by
$scope.incrementLikes=function(technology)
solution2
0 2016-06-30 20:02:37
Your code has a typo in your myController controller. Change finction to function .
solution3
0 2016-06-30 20:03:04
As Pankaj Parkar pointed out you need to correct the "finction" typo as well as to reference the $scope.technology.Likes and $scope.technology.dislikes when you are incrementing their values.
So update these lines:
$scope.incrementLikes=finction(technology)
{
technology.Likes++;
}
$scope.discrementLikes=function(technology)
{
technology.Dislikes++;
}
To this
$scope.incrementLikes=function(technology)
{
$scope.technology.Likes++;
}
$scope.discrementLikes=function(technology)
{
$scope.technology.Dislikes++;
}
solution4
0 2016-07-01 18:33:56
Here's the fully corrected code. I can't comment on the answer from @pzelenovic but do NOT add "$scope.technology.Likes++;" or "$scope.technology.Likes++;" to your increment/decrement functions. Those are fine the way they are because you're updating the likes/dislikes property on the "tech" object you passed in from the click function.
var myapp=angular.module("MyApp",[]); var controller=function($scope) { var technology1=[ {Name: "C#",Likes: 0,Dislikes: 0}, {Name: "JAVA",Likes:0,Dislikes:0}, {Name: "Python",Likes:0,Dislikes:0} ]; $scope.technology=technology1; $scope.incrementLikes=function(technology) { technology.Likes++; } $scope.decrementLikes=function(technology) { technology.Dislikes++; } } myapp.controller('MyController',controller);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <html ng-app="MyApp"> <head> <title></title> <script src="angular.js"></script> <script src="Day2.js"></script> </head> <Body ng-controller="MyController"> <div > <table border='2'> <thead> <tr> <th>Name Of Technology</th> <th>Likes</th> <th>Dislikes</th> <th>Likes/Dislikes</th> </tr> </thead> <tbody> <tr ng-repeat="tech in technology"> <td>{{tech.Name}}</td> <td>{{tech.Likes}}</td> <td>{{tech.Dislikes}}</td> <td> <input type="button" value="Like" ng-click="incrementLikes(tech)"> <input type="button" value="Dislikes" ng-click="decrementLikes(tech)"> </td> </tr> </tbody> </table> </div> </Body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.