2017-10-04 151 views
1

我想创建示例角度应用程序,其中我已初始化一个角度应用程序并呈现控制器中定义的列表,但我没有得到任何输出,甚至没有得到任何错误在JavaScript控制台。角度示例代码不起作用

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title></title> 
    <meta name="description" content=""> 
    <meta name="viewport" content="width=device-width"> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
</head> 

<body ng-app="myApp"> 

<div ng-controller="ListController as listctrl"> 

    <ul> 
    <li ng-repeat="i in listctrl.list">{{i}}</li> 
    </ul> 
</div> 

<script type="text/javascript"> 
angular 
    .module('myApp',[]) 
    .controller('ListController', function($scope) { 
    var listctrl = this; 
    var list = ['A','B','C','D']; 
    }) 
</script> 

</body> 
</html> 

回答

3

你应该有listctrl.list,而不是var list = ['A','B','C','D'];

listctrl.list = ['A','B','C','D']; 

DEMO

<!doctype html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <title></title> 
 
    <meta name="description" content=""> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
 
</head> 
 

 
<body ng-app="myApp"> 
 

 
<div ng-controller="ListController as listctrl"> 
 

 
    <ul> 
 
    <li ng-repeat="i in listctrl.list">{{i}}</li> 
 
    </ul> 
 
</div> 
 

 
<script type="text/javascript"> 
 
angular 
 
    .module('myApp',[]) 
 
    .controller('ListController', function($scope) { 
 
    
 
    var listctrl = this; 
 
    listctrl.list = ['A','B','C','D']; 
 
    }) 
 
</script> 
 

 
</body> 
 
</html>