Angular Jsのリストからデータを取り込めません

初めてAngularを試していますが、この問題を回避する方法が見つかりません。あなたの助けのためのAngular Jsのリストからデータを取り込めません

angular 
    .module('BlogApp', []) 
    .controller('BlogController', BlogController); 

    function BlogController($scope) { 

    $scope.blogPosts = [ 
     {title: 'post1', content: 'content1'}, 
     {title: 'post2', content: 'content2'} 
    ]; 

}

感謝を.jsファイルにリストの内容を印刷しようと、これはコードでHTMLファイルのための

<!DOCTYPE html> 
<html lang="en" ng-app="BlogApp"> 

<head> 

    <meta charset="UTF-8"> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
    <script src="app.js"></script> 

    <title>Title</title> 
</head> 

<body> 

<div class="container" ng-controller="BlogController"> 

    <h1>Blog</h1> 

    <label>Blog Title</label> 

    <input class="form-control"> 

    <label>Blog Content</label> 

    <textarea class="form-control"></textarea> 

    <button class="btn btn-primary btn-block">Post</button> 

    <div ng-repeat="Post in blogPosts" > 

     {{post.title}} 

    </div> 

</div> 


</body> 

</html>

と角ファイルのための！

出典

2017-04-10 Luis Lopez

javascriptのは、大文字と小文字を区別 – charlietfl

変数名の間違いです。 ng-repeatの 'Post'の代わりに' post'を変更してください – Srigar

超高速応答をありがとう!! –

<div ng-repeat="Post in blogPosts" > 
    {{post.title}} 
</div>

であるべき、

<div ng-repeat="Post in blogPosts" > 
    {{Post.title}} 
</div>

DEMO

angular.module('BlogApp', []) 
 
.controller('BlogController', BlogController); 
 
function BlogController($scope) { 
 
    $scope.blogPosts = [ 
 
     {title: 'post1', content: 'content1'}, 
 
     {title: 'post2', content: 'content2'} 
 
    ]; 
 

 
}

<!DOCTYPE html> 
 
<html lang="en" ng-app="BlogApp"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
    <script src="app.js"></script> 
 
    <title>Title</title> 
 
</head> 
 

 
<body> 
 
    <div class="container" ng-controller="BlogController"> 
 
     <h1>Blog</h1> 
 
     <label>Blog Title</label> 
 
     <input class="form-control"> 
 
     <label>Blog Content</label> 
 
     <textarea class="form-control"></textarea> 
 
     <button class="btn btn-primary btn-block">Post</button> 
 
     <div ng-repeat="Post in blogPosts"> 
 
      {{Post.title}} 
 
     </div> 
 
    </div> 
 
</body> 
 

 
</html>

出典

2017-04-10 16:32:25 Sajeetharan

別の質問、なぜ{{Post.title}}ではなく{{Foo.title}}のようなことをやっていますか？どこから投稿を継承しますか？ありがとう –

投稿はあなたがng repeatに使用する変数です。 blogPostsでfooを使うことができます。あなたの助けを借りて、foo.title – Sajeetharan

Excelentを使用してください！ –

Angular Jsのリストからデータを取り込めません

答えて

関連する問題