AngularJS使用ng-repeat。绑定表达式不起作用

时间:2017-04-18 22:18:51

标签: .net angularjs

我没有得到预期的输出,我得到了绑定表达式而不是名称,如下所示

预期输出:

UK
 London
 Manchestor
 Bringham
US
 Dallas
 Austin
 San Antonio
India
 HYD
 BLR
 DLH

输出:

{{country.name}} 
  {{city.name}}

这是我的编码。如果我有任何错误,请告诉我。

JS档案

/// <reference path="angular.min.js" />

var app = angular
                .module("myModule",[])
                .controller("myController", function ($scope)
                {
                    var countries = [
                        {
                            name: "UK",
                            cities: [
                                { name: "London" },
                                { name: "Manchestor" },
                                { name: "Bringham" },
                            ]
                        },
                        {
                            name: "US",
                            cities: [
                                { name: "Dallas" },
                                { name: "Austin" },
                                { name: "San Antonio" },
                            ]
                        },
                        {
                            name: "India",
                            cities: [
                                { name: "Hyd" },
                                { name: "BLR" },
                                { name: "DLH" },
                            ]
                        }
                    ];

                    $scope.countries = countries;
                });

HTML文件

<!DOCTYPE html>
<html >
<head>
    <script src="Script.js"></script>
    <script src="angular.min.js"></script>
    <title></title>
 <meta charset="utf-8" />
</head>
<body ng-app="myModule" style="font-family:Arial" >
    <div ng-Controller="myController">
        <ul>
            <li ng-repeat="country in countries">
               {{country.name}}
                <ul>
                    <li ng-repeat="city in country.cities">
                          {{city.name}}
                    </li>
                </ul>  
            </li>
        </ul>
    </div>
</body>
</html>

欢迎所有人帮助我。

提前致谢!!!

3 个答案:

答案 0 :(得分:0)

如果您的角应用程序在script.js中,请检查导入脚本的顺序。您应该在导入angularjs后导入它!按此顺序:

<script src="angular.min.js"></script>
<script src="Script.js"></script>

答案 1 :(得分:0)

我认为没关系但是将script.js的导入移动到body标签或者在角度导入之后。

&#13;
&#13;
<!DOCTYPE html>
<html >
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.js">
</script>
    <title></title>
 <meta charset="utf-8" />
</head>
<body ng-app="myModule" style="font-family:Arial" >
    <div ng-Controller="myController">
        <ul>
            <li ng-repeat="country in countries">
               {{country.name}}
                <ul>
                    <li ng-repeat="city in country.cities">
                          {{city.name}}
                    </li>
                </ul>  
            </li>
        </ul>
    </div>
	
	 <script>
	var app = angular
                .module("myModule",[])
                .controller("myController", function ($scope)
                {
                    var countries = [
                        {
                            name: "UK",
                            cities: [
                                { name: "London" },
                                { name: "Manchestor" },
                                { name: "Bringham" },
                            ]
                        },
                        {
                            name: "US",
                            cities: [
                                { name: "Dallas" },
                                { name: "Austin" },
                                { name: "San Antonio" },
                            ]
                        },
                        {
                            name: "India",
                            cities: [
                                { name: "Hyd" },
                                { name: "BLR" },
                                { name: "DLH" },
                            ]
                        }
                    ];

                    $scope.countries = countries;
                });
	</script>
</body>
</html>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

我运行了你的代码并且它有效。 angular.min.js在同一个文件夹中吗?由于库未加载,很可能是您遇到了问题