AngularJS $将表单数据保存在单独的哈希中

时间:2012-07-22 06:11:39

标签: angularjs

使用此设置我可以在AngularJS中保存表单。

我希望将数据值推送到服务器(通过$ save方法),如name =“”属性中所定义。

因此,像这样提交的表单如下所示:

理想表格数据

{
  book: {
    word : '...',
    book : '...',
    page : '...'
  }
}

但是它直接作为哈希提交(没有内部书库)。

这是我的表单和控制器的样子:

我的表格

<div>
  <form data-ng-submit="save()">
    <ol class="fields">
      <li>
        <div class="label">
          <label for="word">Word: </label>
        </div>
        <div class="details">
          <input type="text" name="word[word]" data-ng-model="word.word" />
        </div>
      </li>
      <li>
        <div class="label">
          <label for="book">book: </label>
        </div>
        <div class="details">
          <input type="text" name="word[book]" data-ng-model="word.book" />
        </div>
      </li>
      <li>
        <div class="label">
          <label for="page">page: </label>
        </div>
        <div class="details">
          <input type="text" name="word[page]" data-ng-model="word.page" />
        </div>
      </li>
    </ol>
    <nav class="actions">
      <input type="submit" value="save" />
    </nav>
  </form>
</div>

我的控制器(Angular)

var saveCtrl = function($scope, $routeParams, Word, $location) {
  $scope.word = Word.get({
    id : $routeParams.id 
  });
  $scope.save = function() {
    $scope.word.$save({
      id : $scope.word.id
    });
    $location.path('/').replace();
  };
}

有什么想法吗?

1 个答案:

答案 0 :(得分:1)

这样的事情可能会在您的控制器中起作用:

Word.save({
  id : $scope.word.id
}, {
  book : { word: $scope.book }
});

取自docs我认为你需要设置postData来覆盖发布的默认数据。

  

非GET“类”操作:Resource.action([parameters],postData,   [成功],[错误])