如何在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模型而不是production.volume時，那麼數據不會顯示在視圖中。什麼是理想的解決方案，我可以顯示來自json的數據並將任何更新的數據發送回json。

小提琴鏈接，供您參考http://jsfiddle.net/reachsampathreddy/1gxgsrqm/

Answer 1

你在NG-重複，體積和註釋屬性是通過NG-重複創建的生產對象的成員。綁定時不需要嘗試使用索引。正在使用：

<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中聲明瞭生產 - 重複它不再與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會監視你在視圖中改變了什麼，它會在模型​​中自動更新。