Thinkster MEAN Stack教程-获得用户输入:帖子没有生成



我在名为"获取用户输入"的部分。我正在点击"发布"按钮生成一个新的帖子,但没有出现新的帖子。当文本框输入为空时,有代码可以防止生成帖子,但即使我在文本框中键入标题,也不会生成帖子。

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

我试着用我有限的知识对它进行调试(我是MEAN堆栈的初学者),并重新检查了教程代码,这似乎是完全相同的。

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

html代码中有一个拼写错误。ng repeatdiv未正确关闭。

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

这是一个正在工作的plunker。

相关内容

  • 没有找到相关文章

最新更新