Thinkster MEAN Stack教程 - 獲取用戶輸入：Post not getting generated

我在「獲取用戶輸入」部分。我點擊「發佈」按鈕以生成新帖子，但沒有新帖子出現。有一些代碼可以防止在文本框輸入爲空時生成帖子，但即使在文本框中輸入標題時也不會生成帖子。Thinkster MEAN Stack教程 - 獲取用戶輸入：Post not getting generated

的Index.html

<html> 
<head> 
    <title>My Angular App</title> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script> 
    <script src="app.js"></script> 
</head> 
<body ng-app="flapperNews" ng-controller="MainCtrl"> 
    <div ng-repeat="post in posts | orderBy: '-upvotes'"> 
    {{post.title}} - upvotes: {{post.upvotes}} 
    <div> 
    <form ng-submit="addPost()"> 
     <input type="text" ng-model="title"></input> 
     <button type="submit">Post</button> 
    </form> 
</body>

app.js

var app = angular.module('flapperNews',[]); 
app.controller('MainCtrl',[ 
'$scope', 
function($scope){ 
    $scope.posts = [ 
     {title: 'post 1', upvotes: 5}, 
     {title: 'post 2', upvotes: 2}, 
     {title: 'post 3', upvotes: 15}, 
     {title: 'post 4', upvotes: 9}, 
     {title: 'post 5', upvotes: 4} 
    ]; 

    $scope.addPost = function(){ 
     if(!$scope.title || $scope.title === ''){return;} 
     $scope.posts.push({title: $scope.title, upvotes: 0}); 
     $scope.title = ''; 
    }; 
}]);

我試圖用我有限的知識來調試它（我用的平均堆棧初學者），並複檢教程代碼，這似乎是相同的。

這是教程鏈接：https://thinkster.io/mean-stack-tutorial

來源

2015-12-26 white_tiger

應該工作，你是否填寫標題領域之前提交？ – toskv

有在HTML代碼中一個錯字。 ng-repeat div沒有正確關閉。

<div ng-repeat="post in posts | orderBy: '-upvotes'"> 
 
    {{post.title}} - upvotes: {{post.upvotes}} 
 
    <div>

應該是：

<div ng-repeat="post in posts | orderBy: '-upvotes'"> 
 
    {{post.title}} - upvotes: {{post.upvotes}} 
 
</div>

Here的使用它一個plunker。

來源

2015-12-26 16:31:07 toskv

謝謝，我一定錯過了。有沒有一個HTML檢查器，因爲崇高文本默認不會明確突出顯示此錯誤。 –

感謝您介紹Plunker。 –

我總是發現最容易發現這種代碼格式的錯誤，因爲縮進將關閉。我認爲崇高提供。:) – toskv

Thinkster MEAN Stack教程 - 獲取用戶輸入：Post not getting generated

回答

相關問題