Wie generiert man dynamisch ng-model = "my _ {{$ index}}" mit ng-repeat in AngularJS?

Question

Ich möchte Sie fragen, ob Sie mir dabei helfen können.

Ich habe eine jsfiddle mit meinem Problem here erstellt. Ich muss dynamisch einige Eingaben mit ng-Modell in einem ng-Repeater generieren, indem ich ng-model = "my _ {{$ index}}" benutze.

In jfiddle können Sie sehen, dass alles gut funktioniert, bis ich versuche, es dynamisch zu generieren.

würde der HTML-Code sein:

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

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

Können Sie mir eine Idee?

Vielen Dank.

Answer 1

Löst es Ihr Problem?

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

Und in Ihrem Controller:

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

Fiddle

Answer 2

Was Sie tun können, ist ein Objekt auf einem Rahmen zu schaffen (etwa values) und binden an die Eigenschaften dieses Objekts in etwa so:

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

Hier ist eine jsFiddle, welche die komplette Lösung: http://jsfiddle.net/KjsWL/

Answer 3

Gibt es einen Grund, diese Feldnamen zu generieren? Können Sie jedes Feld als ein Objekt mit Name und Wert anstelle eines String-Namens behandeln?

(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" } ] } 
     ]; 
} 

Und Wiederholung aus der selectedQuery.fields:

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

Answer 4

Beterraba Antwort für mich sehr hilfreich war. Wenn ich jedoch die Lösung zu Typescript migrieren musste, würde es sich nicht für mich verhalten. Hier ist, was ich stattdessen getan habe. Ich habe die einzelnen Parameter (Felder in der QueryList in Ihrem Beispiel) in vollständige Objekte erweitert, die ein "Wert" -Feld enthalten. Ich habe dann an das "Wert" -Feld gebunden und es hat super funktioniert!

Ursprünglich Sie hatte:

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

habe ich es zu etwas wie folgt aus:

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

... und zu den 'Wert' Unterfeld gebunden.

Hier ist meine Typoskript, wenn Sie sich interessieren.

Im html:

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

In sproc-param-Direktive, die scharfkantige Material verwendet. Sehen Sie, wo ich das ng-Modell param.Value binden:

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

Answer 5

Ich habe meine Antwort von pkozlowski der erarbeiten und versuchen, eine dynamische Form mit dynamischem ng-Modell zu generieren:

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

Aber zuerst , müssen wir die ‚menschliche‘ Rahmen in unserem Controller wir werden die Daten wie folgt (je nachdem, wie viel Feld erzeugt wird)

$scope.human= {}; 

Und dann auf Vorlage definieren:

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

Es ist ziemlich einfach und ich hoffe meine Antwort hilft.