如何在 ngrepeat 绑定到 $scope 下获取 ngmodel

Question

我有一个来自 api 调用的 json 数据，类似于 procution_volumes 数组。

"production_volumes = [{period:'2014Q4', volume:'200', comment:'nothing'},{period:'2014Q2', volume:'300', comment:'something'},{period:'2014Q1', volume:'500', comment:'search'}]"

我希望它以表格形式显示，用户可以在其中更新数据。表格代码如下

<table>
      <tbody>
        <tr>
          <th><strong>Year</strong></th>
          <th><strong>Quarter</strong></th>
          <th><strong>Volume</strong></th>
          <th><strong>Comment</strong></th>
          <th class="text-right"><strong>Delete</strong></th>
        </tr>
        <tr ng-repeat="production in production_volumes">
          <td class="vertical-align-top">
            <select style="min-width: 140px;" class="select_field form-control">
              <option ng-repeat="period_year in period_years" value="{{period_year}}" ng-model="production.period.split('Q')[0]" ng-selected="production.period.indexOf(production.period)!=-1">{{period.year}}</option>
            </select>
          </td>
          <td class="vertical-align-top">
            <select style="min-width: 140px;" class="select_field form-control">
              <option ng-repeat="period_quater in period_quaters" value="{{period_quater}}" ng-model="production.period.split('Q')" ng-selected="production.period.indexOf('Q'+period_year)!=-1">{{production.period.split("Q")[1]}}</option>
            </select>
          </td>
          <td class="vertical-align-top">
            <input type="text" class="input_field form-control" ng-maxlength="50" ng-pattern="" ng-model="production.volume">
          </td>
          <td class="vertical-align-top">
            <input type="text" class="input_field form-control" ng-maxlength="50" ng-pattern="" ng-model="production.comment">
          </td>
          <td class="text-center" style="vertical-align: middle;">
            <input type="checkbox" class="">
          </td>
        </tr>

        <tr ng-repeat="n in [].constructor(12-project_details.production_volumes.length) track by $index">
          <td class="vertical-align-top">
            <select style="min-width: 140px;" class="select_field form-control" ng-model="">
              <option ng-repeat="period_year in period_years" value="{{period_year}}">{{period_year}}</option>
            </select>
          </td>
          <td class="vertical-align-top">
            <select style="min-width: 140px;" class="select_field form-control" ng-model="">
              <option ng-repeat="period_quater in period_quaters" value="{{period_quater}}">{{period_quater}}</option>
            </select>
          </td>
          <td class="vertical-align-top">
            <input type="text" class="input_field form-control" ng-maxlength="50">
          </td>
          <td class="vertical-align-top">
            <input type="text" class="input_field form-control" ng-maxlength="50">
          </td>
          <td class="text-center" style="vertical-align: middle;">
            <input type="checkbox" class="">
          </td>
        </tr>

      </tbody>
    </table>

在同一控制器的 js 文件中，我无法绑定 $scope.production.volume 和 $scope.production.comment。它给我 $scope.production 的错误没有定义。当我使用不同的 ng-model 而不是 production.volume 时，数据不会显示在视图中。什么是理想的解决方案，我可以显示来自 json 的数据并将任何更新的数据发送回 json。

小提琴链接供您参考http://jsfiddle.net/reachsampathreddy/1gxgsrqm/

Answer 1

您处于 ng-repeat 中，volume 和 comment 属性是通过 ng-repeat 创建的生产对象的成员。绑定时无需尝试使用索引。只是使用：

<td class="vertical-align-top">
    <input type="text" class="input_field form-control" ng-maxlength="50" ng-model="production.volume">
</td>
<td class="vertical-align-top">
    <input type="text" class="input_field form-control" ng-maxlength="50" ng-model="production.comment">
</td>

工作得很好。

Answer 2

请注意，您已在 ng-repeat 中声明生产与 js 文件不再相关。如果您想访问更新的卷和评论，只需使用 ng-change() 。

例如：

  <input type="text" class="input_field form-control" ng-maxlength="50" ng-model="production.volume" ng-change="getTheChangedValue(production.volume)">
</td>

在您的 js 文件中创建 getTheChangedValue() 函数并控制您更改的值。

如果你想发布不需要在 js 文件中手动更改的数据库，Angular 有观察者，无论你在视图中更改什么，它都会在模型中自动更新。