Thinkster MEAN Stack 教程 - 获取用户输入：未生成帖子答案

【问题标题】：Thinkster MEAN Stack tutorial - Getting User Input: Post not getting generatedThinkster MEAN Stack 教程 - 获取用户输入：未生成帖子
【发布时间】：2025-12-30 17:15:11
【问题描述】：

我在“获取用户输入”部分。我正在单击“发布”按钮以生成新帖子，但没有出现新帖子。当文本框输入为空白时，有代码可以防止生成帖子，但即使我在文本框中输入标题也不会生成帖子。

索引.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 = '';
    };
}]);

我尝试以我有限的知识对其进行调试（我是 MEAN 堆栈的初学者），并重新检查了教程代码，这似乎是相同的。

这是教程链接：https://thinkster.io/mean-stack-tutorial

【问题讨论】：

应该可以了，你是在提交之前填写标题字段吗？

标签： angularjs mean-stack

【解决方案1】：

您的 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 是个笨手笨脚的人。

【讨论】：

谢谢，我一定错过了。是否有一个 html 检查器，因为默认情况下 Sublime 文本不会显式突出显示此错误。
也感谢您介绍 Plunker。
我总是发现使用代码格式最容易发现这种错误，因为缩进会关闭。我认为崇高提供了。:)