2017-10-04 22 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>

関連する問題