入力フォームからデータを保存AngularJS

Question

コメントのデータを保存し、ビューに表示してdbに保存します。

私はこのフォームここ

<form> 
     <div class="form-group"> 
      <label>Add a comment</label> 
      <input type="text" ng-model="newRole.newAuthor" placeholder="author"> 
      <input type="date" ng-model="newRole.newDate"> 
      <input type="file" ng-model="newRole.commentImage"> 
      <textarea class="form-control metro" ng-model="newRole.newComment"></textarea> 
      <h2>{{txtcomment}}</h2> 
     </div> 
    </form> 
    <button class="btn btn-primary" ng-click="trip.makeComment(newRole)">Comment</button> 

やデータを保存したい

this.tripObject.comments = [ 
    { 
     "author": "Ronnie Oliver", 
     "date": "05/06/16 01:19 PM", 
     "imageURL": "/assets/images/placeholders/user.svg", 
     "text": "Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo. Curabitur blandit tempus porttitor." 
    }, 
    { 
     "author": "Shaggy Rogers", 
     "date": "05/06/16 12:48 PM", 
     "imageURL": "/assets/images/placeholders/user.svg", 
     "text": "Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo. Curabitur blandit tempus porttitor." 
    } 
]; 

を持っており、これはコントローラです：

this.makeComment = function(newRole){ 
       // $scope.txtcomment = ''; 
       var newRole = { 
        "author":newRole.newAuthor, 
        "date":$scope.newDate, 
        "imageURL":$scope.commentImage, 
        "text" : $scope.newComment 
       } 
       console.log($scope.newRole); 



       console.log($scope.tripObject.comentario) 


       this.tripObject.comments.push($scope.newRole); 
       console.log(this.tripObject.comments); 



      }; 

私が何かということを知っています間違っているコントローラーやフォームとは、私は何を知っていない。

Answer 1

$scope.newDateなどありません - それは$scope.newRole.newDate、右ですか？あなたが引数としてでnewRoleを渡していることから、あなただけの代わりにこれを行うことができ、けれども：

this.tripObject.comments.push({ 
    author: newRole.newAuthor, 
    date: newRole.newDate, 
    imageURL: newRole.commentImage, 
    text: newRole.newComment 
}) 

（も、おそらく同じ名前で新しい変数にnewRoleを再割り当てべきではありません）。

Answer 2

まず

$ scope.tripObject = {コメント：[]}を宣言する。

そして

$ scope.newRole = {}を宣言する。 JS

$ scope.tripObject.comments.push（$ scope.newRole）でクリックMAKECOMMENTに続いて

。

ここでnewRoleはすべてのアイテムがプッシュするオブジェクトです