AngularJS에서 ng-model="my_{$index}"를 ng-model로 동적으로 생성하는 방법

AngularJS에서 ng-model="my_{$index}"를 ng-model로 동적으로 생성하는 방법

이것 좀 도와주실 수 있는지 여쭤보고 싶습니다.

나는 여기서 내 문제를 해결했다.ng-model="my_{$index}}}" 방법을 사용하여 ng-model을 사용하여 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>

자바스크립트는...

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

어떤 아이디어라도 줄 수 있나요?

정말 감사해요.

이것으로 문제가 해결됩니까?

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>

만지작거리다

스코프상에 오브젝트를 작성할 수 있습니다(예를 들어,values) 및 다음과 같이 이 오브젝트의 속성에 바인드합니다.

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

완전한 솔루션을 설명하는 jsFiddle은 다음과 같습니다.http://jsfiddle.net/KjsWL/

저는 pkozlowski의 답변을 상세하게 설명하고 다이내믹 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;

그것은 매우 간단하며 나는 내 대답이 도움이 되기를 바란다.

이러한 필드명을 생성하는 이유가 있습니까?각 필드를 문자열 이름 대신 이름과 값을 가진 개체로 취급할 수 있습니까? (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>

베테라바의 답변은 나에게 큰 도움이 되었다.그러나 솔루션을 Typescript로 이행해야 했을 때, 그것은 나에게 있어서 동작하지 않았다.제가 대신 한 일은 이렇습니다.개별 파라미터(예에서는 queryList의 필드)를 "value" 필드를 포함하는 풀오브젝트로 확장했습니다.그 후, 「가치」필드에 묶었더니, 매우 효과가 있었습니다.

원래 가지고 있던 것:

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

이렇게 바꿨어요.

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

...'Value' 하위 필드에 바인딩됩니다.

괜찮으시다면 여기 제 타이프스크립트입니다.

html:

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

Angular Material을 사용하는 sproc-param 지시어.ng-model을 param에 바인드하는 방법을 참조하십시오.값:

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

다음 방법을 사용하여 ng-model로 ng-repeater에서 동적으로 몇 가지 입력을 생성해야 합니다.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 개발자 가이드 - 식 컨텍스트

언급URL : https://stackoverflow.com/questions/19573001/how-to-generates-dynamically-ng-model-my-index-with-ng-repeat-in-angularj