Can't populate data from list on Angular Js

Question

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!

variable name mistake. Change post instead of Post in ng-repeat — Srigar
– Srigar, Commented Apr 10, 2017 at 16:33

Sajeetharan · Accepted Answer · 2017-04-10 16:32:25Z

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

Another question, why I cant do something like {{Foo.title}} instead of {{Post.title}} ? from where do i inherit the Post? Thanks
Post is just the variable you use for ng repeat . you could use foo in blogPosts. then use foo.title

Collectives™ on Stack Overflow

Can't populate data from list on Angular Js

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related