如何获取 ngmodel 和 ng repeat 绑定到 $scope

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 形式显示，用户可以在其中更新数据。 Table代码如下

<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。

Fiddlelink供大家参考http://jsfiddle.net/reachsampathreddy/1gxgsrqm/

Answer 1

您在 ng-repeat 中，音量和评论属性是通过 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() 函数并控制您更改的值。

如果你想 post 数据库你不需要在你的 js 文件中手动更改它，Angular 有观察者你在视图中所做的任何更改它都会自动更新型号。

如何获取 ngmodel 和 ng repeat 绑定到 $scope

How to get ngmodel under ngrepeat binding to $scope

javascript

json

angularjs

ng-repeat

angularjs-ng-model