无法从 Angular Js 上的列表中填充数据

Question

我是第一次尝试 Angular，我找不到解决这个问题的方法。试图在 .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>

以及 angular 文件

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

    function BlogController($scope) {

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

}

感谢您的帮助！

Answer 1

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

应该是，

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

演示版

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>

无法从 Angular Js 上的列表中填充数据

Can't populate data from list on Angular Js

html

javascript

visual-web-developer

angularjs