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
    .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上的列表中填充数据

1 个答案: