Question

我是angularJS的初学者。我正在尝试创建一个简单的示例，其中为每个数组项创建一个表行。但我得到了空白页作为输出..这是代码..

<!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>

事先感谢您的帮助：）

Answer 1

<!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”

拼写错误

“ng-contrller”应该是“ng-controller”

更正您的拼写并运行您自己的代码。否则代码没问题

Answer 2

您不应该在桌面上定义控制器

＆＃13;

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"
        }

    ]
});

＆＃13;

<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>

＆＃13;

每个数组项

2 个答案: