42

我想问你是否可以帮我解决这个问题。

我在这里创建了一个 jsfiddle 来解决我的问题。我需要使用 ng-model="my_{{$index}}" 的方式在 ng-repeater 中使用 ng-model 动态生成一些输入。

在 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;
  });
}

你能给我任何想法吗？

非常感谢。

4

6 回答 6

47

它解决了你的问题吗？

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>

小提琴

于 2013-10-24T18:38:34.390 回答
24

你可以做的是在一个范围内创建一个对象（比如，values）并绑定到这个对象的属性，如下所示：

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

这是一个说明完整解决方案的 jsFiddle：http: //jsfiddle.net/KjsWL/

于 2013-10-24T17:59:06.103 回答
4

我确实从 pkozlowski's 详细说明了我的答案，并尝试使用动态 ng-model 生成动态表单：

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

这很简单，我希望我的回答有所帮助。

于 2017-07-20T09:47:07.613 回答
1

是否有理由生成这些字段名称？您可以将每个字段视为具有名称和值的对象而不是字符串名称吗？（小提琴）

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>
于 2013-10-24T19:31:29.740 回答
0

Beterraba 的回答对我很有帮助。但是，当我不得不将解决方案迁移到 Typescript 时，它对我来说不起作用。这是我所做的。我将各个参数（示例中 queryList 上的字段）扩展为包含“值”字段的完整对象。然后我绑定到“价值”字段，效果很好！

最初你有：

[
  { 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>

在使用 Angular Material 的 sproc-param 指令中。查看我将 ng-model 绑定到 param.Value 的位置：

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: "="
        }
}
于 2016-10-14T17:36:06.207 回答
0

我需要在 ng-repeater 中使用 ng-model 动态生成一些输入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。

有关详细信息，请参阅

于 2019-07-19T12:54:15.267 回答