Как генерировать динамически ng-model = "my _ {{$ index}}" с ng-repeat в AngularJS?

Я хотел бы спросить вас, можете ли вы дать мне руку на это.

Я создал jsfiddle с моей проблемой здесь. Мне нужно динамически генерировать некоторые входы с ng-моделью в ng-повторителе, используя ng-model = "my _ {{$ index}}".

В jsfiddle вы можете видеть, что все работает нормально, пока я не попытаюсь сгенерировать его динамически.

Html:

<div ng-app>
<div ng-controller="MainCtrl">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
  <tr>
    <td>
      <select ng-model="selectedQuery" 
        ng-options="q.name for q in queryList" >
        <option title="---Select Query---" value="">---Select Query---</option>
      </select>
    </td>
  </tr>
  <tr ng-repeat="param in parameters">
    <td>{{param}}:</td>
    <td><input type="text" ng-model="field_X" />field_{{$index}}</td>
  </tr>
</table>
<div>
<div>

И javascript...

function MainCtrl($scope) {
 $scope.queryList = [
    { name: 'Check Users', fields: [ "Name", "Id"] },
    { name: 'Audit Report', fields: [] },
    { name: 'Bounce Back Report', fields: [ "Date"] } 
  ];

$scope.$watch('selectedQuery', function (newVal, oldVal) {
    $scope.parameters = $scope.selectedQuery.fields;
  });
}

Можете ли вы дать мне какие-либо идеи?

Большое спасибо.

Ответы

Ответ 1

Решает ли ваша проблема?

function MainCtrl($scope) {
     $scope.queryList = [
        { name: 'Check Users', fields: [ "Name", "Id"] },
        { name: 'Audit Report', fields: [] },
        { name: 'Bounce Back Report', fields: [ "Date"] } 
      ];
    $scope.models = {};
    $scope.$watch('selectedQuery', function (newVal, oldVal) {
        if ($scope.selectedQuery) {
            $scope.parameters = $scope.selectedQuery.fields;
        }
    });
}

И в вашем контроллере:

  <tr ng-repeat="param in parameters">
    <td>{{param}}:</td>
    <td><input type="text" ng-model="models[param] " />field_{{$index}}</td>
  </tr>

скрипка

Ответ 2

Что вы можете сделать, так это создать объект в области (скажем, values) и привязать к свойствам этого объекта так:

<input type="text" ng-model="values['field_' + $index]" />

Вот jsFiddle, иллюстрирующий полное решение: http://jsfiddle.net/KjsWL/

Ответ 3

Я разработал свой ответ от pkozlowski и попытаюсь создать динамическую форму с динамической ng-моделью:

<form ng-submit="testDynamic(human)">
    <input type="text" ng-model="human.adult[($index+1)].name">
    <input type="text" ng-model="human.adult[($index+1)].sex">
    <input type="text" ng-model="human.adult[($index+1)].age">
</form>

Но сначала нам нужно определить "человеческую" область внутри нашего контроллера

$scope.human= {};

И затем, по представлению, у нас будут такие данные (в зависимости от того, сколько полей создано):

var name = human.adult[i].name;
var sex = human.adult[i].sex;
var age = human.adult[i].age;

Это довольно просто, и я надеюсь, что мой ответ поможет.

Ответ 4

Есть ли причина генерировать эти имена полей? Можете ли вы обрабатывать каждое поле как объект с именем и значением вместо имени строки? (FIDDLE)

function MainCtrl($scope) {
     $scope.queryList = [
         { name: 'Check Users', fields: [ { name: "Name" },  { name: "Id" } ] },
         { name: 'Audit Report', fields: [] },
         { name: 'Bounce Back Report', fields: [ { name: "Date" } ] } 
      ];
}

И просто повторяйте selectedQuery.fields:

<tr ng-repeat="field in selectedQuery.fields">
    <td>{{field.name}}:</td>
    <td><input type="text" ng-model="field.value" /></td>
</tr>

Ответ 5

Ответ Beterraba был очень полезен для меня. Однако, когда мне пришлось перенести решение на Typcript, это не повлияло бы на меня. Вот что я сделал вместо этого. Я развернул отдельные параметры (поля в списке запросов в вашем примере) в полные объекты, которые включали поле "значение". Затем я привязался к полю "значение", и он отлично работает!

Первоначально у вас было:

[
  { name: 'Check Users', fields: [ "Name", "Id"] },
    ...
  }
]

Я изменил его на следующее:

[
  { name: 'Check Users', fields: [
                                    {Text:"Name",Value:""},
                                    {Text:"Id",Value:0}],
                                    ...
                                   ]
  }
]

... и привязаны к подполе "Значение".

Вот вам, пожалуйста, мой Титульный лист.

В html:

<div ng-repeat="param in ctrl.sprocparams" >
    <sproc-param param="param" />
</div>

В директиве sproc-param, использующей угловой материал. Смотрите, где я привязываю ng-модель к параметру. Значение:

return {
    restrict: 'E',
    template: '
                <md-input-container class="md-block" flex-gt-sm>
                    <label>{{param.Name}}</label>
                    <input  name="{{param.Name}}" ng-model=param.Value></input>
                </md-input-container>',
    scope: {
            param: "="
        }
}

Ответ 6

Мне нужно динамически генерировать некоторые входные данные с помощью ng-модели в ng-репитере, используя способ ng-model="my_{{$index}}".

Можно использовать this идентификатор с аксессором свойства обозначения в скобках:

  <tr ng-repeat="param in parameters">
    <td>{{param}}:</td>
    <td>
      <input type="text" ng-model="this['my_'+$index]" />
      my_{{$index}}
    </td>
  </tr>

Можно получить доступ к объекту $ scope, используя идентификатор this.

Для получения дополнительной информации см.

AngularJS Developer Guide - Контекст выражения