Search code examples
javascripthtmlangularjsvisual-web-developer

Can't populate data from list on Angular Js

I'm trying Angular for the first time, and i can't find a way to come around this problem. trying to print the content of a list in a .js file, this is the code for the HTML File

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

and for the angular File

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

    function BlogController($scope) {

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

}

Thanks for your help!

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

    Should be,

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