Как получить ngmodel при привязке ngrepeat к $ scope

0

У меня есть json-данные из вызова api, который похож на массив 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/

Теги:
angularjs-ng-model
ng-repeat

2 ответа

0
Лучший ответ

Вы находитесь в 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>

работает просто отлично.

Поделиться
  • 0
    Таким образом, я могу отображать данные массива, но не могу привязать к области, чтобы отправить данные обратно, когда пользователь отправляет.
  • 0
    Почему нет? Angular отслеживает, откуда он появился, и обновляет его в модели? Я добавил кнопку отправки и просто поместил в нее строку отладчика и проверил область действия и значения были обновлены.
0

Обратите внимание, что вы объявили о выпуске в 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 есть наблюдатели, что бы вы ни изменили в представлении, которое оно автоматически обновит в модели.

Поделиться
  • 0
    В конце таблицы есть кнопка отправки, которую я здесь пропустил. При отправке я создал функцию в контроллере, где я пытаюсь создать массив с существующими и обновленными полями для переменной данных и отправить его в вызов API. но проблема в том, когда объявляется var data = {"volume" = $ scope.production.volume, "comment" = $ scope.production.comment} .. Я получаю ошибку $ scope.production не определяется как динамически сгенерированное используя нг-повтор. Я надеюсь, вы поняли мою проблему.
  • 0
    Можете ли вы предоставить полный фрагмент кода? если вы хотите, вы можете скопировать исходный массив в переменную temp, используя angular.copy (). сделайте одно: возьмите копию исходного массива, например original_production_volumes, и все, как измененные значения будут в production_volumes, так что у вас есть оба, вы можете использовать любой, какой захотите.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню