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