angularJS table row for each array item

Question

I am beginner in angularJS..i am trying to create a simple sample in which a table row is created for each array item..but i got blank page as output..here is code..

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<body ng-app="myApp">

<table ng-contrller="myCtrl" border="1">
    <tr ng-repeat = "x in records">
        <td>{{x.Name}}</td>
        <td>{{x.Country}}</td>
    </tr>
</table>

<script>

var app = angular.module("myApp", []);



app.controller("myCtrl", function($scope) {
    alert('hi');
    $scope.records = [

        {
            "Name" : "name1",
            "Country" : "India"
        },

        {
            "Name" : "name2",
            "Country" : "Canada"
        },

        {
            "Name" : "name3",
            "Country" : "USA"
        }

    ]
});

</script>
</body>
</html>

thanks in advance for help :)

Piyali · Accepted Answer · 2017-12-11 05:21:31Z

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<body ng-app="myApp">

<table ng-controller="myCtrl" border="1">
    <tr ng-repeat = "x in records">
        <td>{{x.Name}}</td>
        <td>{{x.Country}}</td>
    </tr>
</table>

<script>

var app = angular.module("myApp", []);



app.controller("myCtrl", function($scope) {
    $scope.records = [

        {
            "Name" : "name1",
            "Country" : "India"
        },

        {
            "Name" : "name2",
            "Country" : "Canada"
        },

        {
            "Name" : "name3",
            "Country" : "USA"
        }

    ]
});

</script>
</body>
</html>

ng-contrller="myCtrl"

spelling mistake

"ng-contrller" should be "ng-controller"

correct your spelling and run your own code. otherwise code is ok

it's OK. sometime a small mistake can turn into a big issue.

jitender · Accepted Answer · 2017-12-11 05:08:55Z

You shouldn't define your controller on table

var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl',function($scope, $timeout) {
 $scope.records = [

        {
            "Name" : "name1",
            "Country" : "India"
        },

        {
            "Name" : "name2",
            "Country" : "Canada"
        },

        {
            "Name" : "name3",
            "Country" : "USA"
        }

    ]
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<table  border="1">
    <tr ng-repeat = "x in records">
        <td>{{x.Name}}</td>
        <td>{{x.Country}}</td>
    </tr>
</table>
</div>

working in this way too..but in my case it was just spelling mistake in ng-controller..thanks for guidance btw :)

Collectives™ on Stack Overflow

angularJS table row for each array item

2 Answers 2

1 Comment

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Related