2

私はAngularJSが初めてです。私は ng-repeat の背後にある理論を調査しましたが、ネストされた ng-repeat の双方向データバインディングまたはオブジェクト作成の良い例を見つけることができません。最近のバージョンでは構文が変更されていることを理解しています。私は1.1.5を使用しています。

ネストされたコメント オブジェクトの配列を持つ投稿オブジェクトがあります。投稿のコメントの配列に新しいコメント オブジェクトを追加できるようにしたいと考えています。私は多くの異なるバージョンを試しました。

これは私のHTMLです：

<div id='posts' ng-controller="PostsCtrl">

      <ul>
          <div id='post' ng-repeat="post in posts track by post.id">
              <div id='postMedia'>
              <img ng-click="" ng-src={{post.attachment}} />
              </div>
              <div ng-click="">
                  <div ng-click="">{{post.message}}</div>
                  <div ng-click="">{{post.created_at}}</div>
              </div>
          <h1>Comments</h1>
          <div id='comment' ng-repeat="comment in post.comments track by post.comment.id">
              <div ng-click="">{{comment.body}}</div>
          </div>
          <form ng-submit="addComment()">
            <input id="body" type="text" placeholder="Reply…" ng-model="post.comment.body">
            <input type="submit" value="Add">
          </form>
          </div>
      </ul>
    </div>

これはコントローラーです：

myApp.controller('PostsCtrl', ['$scope', 'angularFire',
function MyCtrl($scope, angularFire) {
var url = 'https://inviter-dev.firebaseio.com/posts';
$scope.items = angularFire(url, $scope, 'posts',  {});
$scope.commentProp = 'comments';

$scope.addComment = function() {
    $scope.comments.push($scope.newcomment);
}

  }
]);

解決：

これを解決してくれたChandermaniの回答に感謝します。データ ストアで body というキーを使用するようにしたかったので、コントローラーを少し変更しました。

myApp.controller('PostsCtrl', ['$scope', 'angularFire',
function MyCtrl($scope, angularFire) {
var url = 'https://inviter-dev.firebaseio.com/posts';
$scope.items = angularFire(url, $scope, 'posts',  [] );

$scope.addComment = function(post,comment) {
    post.comments.push({body:comment});
}

}

]);

4

1 に答える 1

3

メソッドの問題addCommentは、コメントを追加する必要がある投稿がわからないことです。また、コメントの ng-repeat の一部であるコメント入力は、コントローラ メソッドに渡すことができる独立したモデルを持つことができます。

次の変更を行う必要があります。htmlで

<form ng-submit="addComment(post,commentData)">
   <input id="body" type="text" placeholder="Reply…" ng-model="commentData">
   <input type="submit" value="Add">
</form>

コントローラーで

$scope.addComment = function(post,comment) {
    post.comments.push(comment);
}
于 2013-08-18T10:28:46.553 に答える