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创建的生产对象的成员。绑定时无需尝试使用索引。只需使用：

log4j.main = {
// Example of changing the log pattern for the default console appender:
//
//appenders {
//    console name:'stdout', layout:pattern(conversionPattern: '%c{2} %m%n')
//}

error  'org.codehaus.groovy.grails.web.servlet',        // controllers
       'org.codehaus.groovy.grails.web.pages',          // GSP
       'org.codehaus.groovy.grails.web.sitemesh',       // layouts
       'org.codehaus.groovy.grails.web.mapping.filter', // URL mapping
       'org.codehaus.groovy.grails.web.mapping',        // URL mapping
       'org.codehaus.groovy.grails.commons',            // core / classloading
       'org.codehaus.groovy.grails.orm.hibernate',      // hibernate integration
       'org.springframework',
       'org.hibernate',
       'net.sf.ehcache.hibernate'

debug 'grails.app.controllers.MyController',
      'org.codehaus.groovy.grails.plugins'

工作得很好。

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已经看到你在视图中改变它会在模型中自动更新的内容。

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

2 个答案: