無法從Angular Js上的列表中填充數據

我第一次嘗試Angular，並且找不到解決此問題的方法。要打印在一個.js文件列表的內容，這是對HTML代碼文件無法從Angular Js上的列表中填充數據

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

和角文件

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

    function BlogController($scope) { 

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

}

感謝您的幫助！

來源

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

另一個問題，爲什麼我不能做{{Foo.title}}而不是{{Post.title}}？我從哪裏繼承郵政？謝謝 –

郵政只是您用於ng重複的變量。你可以在blogPosts中使用foo。然後使用foo.title – Sajeetharan

卓越，感謝您的幫助！ –

無法從Angular Js上的列表中填充數據

回答

相關問題