web-dev-qa-db-ja.com

AngularJSフォームの動的ngモデル名

AngularJSフォームがあり、ng-repeatを使用して、別の選択に基づいてフォームのフィールドを動的に構築しています。モデル名を動的に生成しようとしていて、問題が発生しています。

<div class="form-group" ng-repeat="parameter in apiParameters">
  <label for="{{parameter.paramName}}" class="col-sm-2 control-label">{{parameter.paramTitle}}</label>
  <div class="col-sm-3">
    <input type="text" class="form-control" name="{{parameter.paramName}}" id="{{parameter.paramName}}" ng-model="formData.parameters.{{parameter.paramName}}" placeholder="{{parameter.paramTitle}}">
  </div>
</div>

私が必要なのは、ng-model = "formData.parameters.fooId"またはng-model = "formData.parameters.barId"のようなものに評価することです

上記の結果はエラーになります：エラー：[$ parse：syntax]構文エラー：トークン '{'は、式[formData.parameters。{{parameter.paramName}}]の21列目の[{{で始まる予期しないトークンですparameter.paramName}}]。

私のコントローラーには次のものがあります：

$scope.formData = {};
$scope.formData = {
  settings:
  {
    apiEndpoint: '',
    method: 'get'
  },
  parameters: {}
};

Ng-model = "formData.parameters。[parameter.paramName]"も試しました（この質問に基づいて AngularJSで動的モデル名を設定するにはどうすればよいですか ）が、それはできませんevalとng-model値の設定に失敗しました。私が成し遂げようとしていることがさらに可能かどうかはわかりません。私は私が望むものを達成するためにコントローラを通過する必要があると仮定していますが、どんな助けでもいただければ幸いです。

angularjsangular-ngmodel
11
jdiver

モデルとしてハッシュキーを使用するだけです：

<div class="form-group" ng-repeat="parameter in apiParameters">
  <label for="{{parameter.paramName}}" class="col-sm-2 control-label">{{parameter.paramTitle}}</label>
  <div class="col-sm-3">
    <input type="text" class="form-control" name="{{parameter.paramName}}" id="{{parameter.paramName}}" ng-model="formData.parameters[parameter.paramName]" placeholder="{{parameter.paramTitle}}">
  </div>
</div>

他にも多くの方法がありますが、これは他の方法よりも簡単です。

24
Sergey Moiseev

私はこのソリューションをテストしましたが、自分自身に問題があります。問題は、パラメーター "formData"が各反復に個別に割り当てられることです。つまり、preタグを各反復に挿入すると、各反復の値が個別に表示され、フォームを送信した後、コントローラ内のすべてのformDataを取得します。

このため、私は非常に簡単な解決策を見つけました、それはng-initです!!!!

このコードをフォームの繰り返しタグの前に追加するだけです。この質問の例では、次のようになります。

<form ng-init="formData = []">
    <div class="form-group" ng-repeat="parameter in apiParameters">
        <label for="{{parameter.paramName}}" class="col-sm-2 control-label">{{parameter.paramTitle}}</label>
        <div class="col-sm-3">
            <input type="text" class="form-control" name="{{parameter.paramName}}" id="{{parameter.paramName}}" ng-model="formData.parameters[parameter.paramName]" placeholder="{{parameter.paramTitle}}">
        </div>
    </div>
</form>
0
Mohammad Amin