Question

我正在尝试为我的项目构建一个在线商店，我希望我可以在我的一个页面中添加一个评论表单，我遇到了将输入值插入数组的问题！这是我的文件

details.html

<div class="col-sm-12">
                <div class="row">
                    <div ng-controller="reviewController">
                    <h3 class="pdt-title">Review</h3><hr>
                    <div class="alert alert-danger" ng-if="reviews.length == 0">
                        No reviews yet, be the first to review this Product!
                    </div><br>
                    <div class="col-sm-12" ng-repeat="review in reviews" >
                    <blockquote class="row">
                        <h3 class="pdt-title col-sm-6">{{review.username}}</h3>
                        <h3 class="pdt-title col-sm-6">{{review.star}}</h3>
                        <h5 class="col-sm-12"><small><i>{{review.email}}</i></small></h5>
                        <p class="col-sm-12">{{review.message}}</p>
                    </blockquote>
                    </div>
                    <form class="form-inline form-group">
                        <div class="input-group">
                            <span class="input-group-addon">Name</span>
                            <input class="form-control" type="text" ng-model="username"></input>

                            <span class="input-group-addon">E-mail</span>
                            <input class="form-control" type="email" ng-model="email"></input>

                            <span class="input-group-addon">Star</span>
                            <select class="form-control" ng-model="star">
                                <option name="oneStar" value="1 star">1 Star</option>
                                <option name="twoStar" value="2 star">2 Star</option>
                                <option name="threeStar" value="3 star">3 Star</option>
                                <option name="fourStar" value="4 star">4 Star</option>
                                <option name="fiveStar" value="5 star">5 Star</option>
                            </select>
                        </div>
                        </form>
                        <textarea class="form-control" rows="5" ng-model="message"></textarea><br>
                        <input type="submit" class="btn btn-block btn-success" ng-submit="addReview()" value="Submit review"></input>


                    </div>
                    </div>
                </div>
            </div>
        </div>

这是我的控制器

app.js

app.controller('reviewController',function($scope){
$scope.reviews=[];
$scope.addReview=function(){
    $scope.reviews.push({
        name:$scope.username,
        email:$scope.email,
        star:$scope.star,
        message:$scope.message
    });
};
});

如果有人在页面刷新时解释留在页面上的评论会很好，通常评论会在页面刷新时丢失。

Answer 1

如评论中所述，您应该从某个地方加载您的评论。服务应该做的工作。

但你的问题出在你的ng-submit按钮上。没有深入检查，但我改为ng-click，它有效。此外，请务必始终放置＆＃34;字段＆＃34;在对象内部而不是直接在$ scope上。

//Set the models inside an object
$scope.review = {};

然后

<input class="form-control" type="text" ng-model="review.username" />

这里有一个更新的： Fiddle

作为额外提示，如果您还没有查看这本精彩的指南，那么您应该节省一些时间并仔细阅读： angular-styleguide

它包含John Papa编写的角度最佳实践的汇编。

使用角度js查看表单

1 个答案: