web-dev-qa-db-ja.com

AngularJSでng-repeatを使用してng-model = "my _ {{$ index}}"を動的に生成する方法は？

これについてお話いただけますか。

私の問題でjsfiddleを作成しました here 。 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;
  });
}

アイデアをいただけますか？

どうもありがとう。

javascriptangularjsng-repeat
42
Federico Piazza

それはあなたの問題を解決しますか？

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>

フィドル

46
Beterraba

できることは、スコープ（たとえば、values）にオブジェクトを作成し、このオブジェクトのプロパティに次のようにバインドすることです。

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

完全なソリューションを示すjsFiddleを次に示します。 http://jsfiddle.net/KjsWL/

24
pkozlowski.opensource

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

それは非常に簡単で、私の答えが役立つことを願っています。

3
FirdhausKM

それらのフィールド名を生成する理由はありますか？各フィールドを文字列名ではなく名前と値を持つオブジェクトとして扱うことはできますか？ （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>
1
Jason Goemaat

ベテラバの答えは私にとって非常に役に立ちました。ただし、ソリューションをTypeScriptに移行する必要があった場合、動作しません。これが私が代わりにしたことです。個々のパラメーター（例のqueryListのフィールド）を、「値」フィールドを含む完全なオブジェクトに拡張しました。次に、「値」フィールドにバインドしました。

もともとあなたが持っていた：

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

次のように変更しました。

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

...そして「Value」サブフィールドにバインドされます。

気にするならここに私のTypeScriptがあります。

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: "="
        }
}
0
Marcus Cole

ng-model="my_{{$index}}"の方法を使用して、ng-repeaterのng-modelでいくつかの入力を動的に生成する必要があります。

ブラケット表記でthis識別子を使用できます property accessor ：

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

識別子thisを使用して$ scopeオブジェクトにアクセスできます。

詳細については、

0
georgeawg