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

자바 스크립트는 대소 문자를 구분 – 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

또 다른 질문으로, 왜 {{Post.title}} 대신 {{Foo.title}} 같은 것을 할 수 있습니까? 어디에서 우체국을 상속합니까? 감사합니다 –

포스트는 ng 반복에 사용하는 변수입니다. blogPosts에서 foo를 사용할 수 있습니다. 그런 다음 foo.title을 사용하십시오. – Sajeetharan

Excelent, 도움 주셔서 감사합니다! –

Angular Js의 목록에서 데이터를 채울 수 없습니다.

답변

관련 문제