angularjs - 如何将对象添加到 AngularJS 中的嵌套数组？

Question

我是 AngularJS 的新手。我研究了 ng-repeats 背后的理论，但我找不到任何用于嵌套 ng-repeats 的 2 路数据绑定(bind)或对象创建的好例子。我知道语法在最近的版本中发生了变化。我正在使用 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>

这是 Controller :

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 回答解决了这个问题。我稍微修改了 Controller ，因为我希望在数据存储中使用一个名为 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});
}

}

]);

Answer 1

你的问题addComment方法是它不知道需要向哪个帖子添加评论。此外，作为您的 ng-repeat 评论的一部分的评论输入可以有一个独立的模型，该模型可以传递给 Controller ​​方法。

您需要进行以下更改。在 html 中

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

在您的 Controller 中

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