Question

我在“＆＃34;获取用户输入＆＃34;”部分。我点击了＆＃34; Post＆＃34;按钮生成新帖子，但没有新帖子出现。当文本框输入为空时，有代码可以防止生成帖子，但即使我在文本框中输入标题，也没有生成帖子。

的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

Answer 1

你的HTML代码中有一个拼写错误。 ng-repeat div未正确关闭。

＆＃13;

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

＆＃13;

应该是：

＆＃13;

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

＆＃13;

Here＆＃39}是一名有效的人。

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

1 个答案: