javascript - 无法将输入文本框附加到 Angular $scope

Question

我的 Angular 应用程序中有一些标记，如下所示:

<table class="table table-striped">
  <tr ng-repeat="query in saved_queries">
    <td ng-click="fill()"><a>{{ query.title || query.query_string }}</a></td>
    <td class="pull-right" ng-click="kill_entry({{query.id}})"><i class="glyphicon glyphicon-remove"></i></td>
    <td class="pull-right"><input ng-model="title_box" name="title_box" id="title_box"><i class="glyphicon glyphicon-pencil" ng-click="add_title({{query.id}})"></i></td>
  </tr>
</table>

这里的想法是，一个表格列出了所有可用的已保存查询，如果您想为查询添加标题，您可以使用输入字段，当您单击编辑图标时，它将更改为显示您刚刚创建的标题。

它使用运行此代码的 ng-click 来完成此操作:

 $scope.add_title = function(id){
    var title = $.post('http://10.241.16.159:3000/api/add_title', {'id': id, 'title': $scope.title_box });
    title.done(function(result){
      $('#refresh').click();
    })
 }

目前，当我尝试使用此表单添加标题时，我会在服务器上收到以下日志:

Started POST "/api/add_title" for 172.25.82.141 at 2014-08-01 21:13:58 +0000
Processing by SavedQueriesController#update as */*
  Parameters: {"id"=>"43"}

问题是，参数哈希应该如下所示

{"id"=>"43", "title"=>"input from text box"}

无论出于何种原因，文本框中的输入都没有传递到服务器。 $scope.title_box 不得采用正确的值。

Answer 1

您将 saving_queries 中的每个查询绑定(bind)到同一个ng-model="title_box"。

看来您应该将输入绑定(bind)到query.title_box。然后，将整个 query 对象传递给您的点击处理程序。

<input ng-model="query.title_box" name="title_box" id="title_box" />
<i class="glyphicon glyphicon-pencil" ng-click="add_title(query)"></i>

这是一个工作演示:http://plnkr.co/edit/mkH4IwBbL3Svi8CjkERC?p=preview