Dynamisch hinzufügen Schlüsselpaar Wert $ Scope-Variable und binden sie mit Label und Eingabe

Ich arbeite an einem AngularJS-Projekt. Ich habe ein Formular, wo der Benutzer optional mehrere Paare (Schlüssel, Wert) hinzufügen kann.

Stellen Sie sich vor der Schlüssel die Bezeichnung für ein Eingabefeld ist, kann der Benutzer aus einer Dropdown-Liste wählen Sie den Wert des Etiketts (Schlüssel) zu sein.

Der Wert ist der Wert, den der Benutzer in das Eingabefeld eingegeben hat. Also, der Schlüssel und der Wert werden beide vom Benutzer dynamisch entschieden. Hier

ist, was ich habe versucht:

$scope.optionArray = []; 
$scope.addOption = function(key, value) { 
    var temp = {}; 
    temp[key] = value; 
    optionArray.push(temp); 
}

Und ich bin mit ng-repeat den Inhalt optionArray in der HTML-Datei angezeigt werden soll. In der HTML-Datei, habe ich eine Schaltfläche, die wie eine Option, um das Paar hinzufügen:

<button type="button" 
     data-ng-click="addOption(???, ???)">Add Options 
</button> 
<div ng-repeat="option in optionArray"> 
    <label> 
     <select ng-model=option.???> 
      <option>...</option> 
     </select> 
     <input ng-model=option.???> 
    </label> 
</div>

Ich bin wirklich verwirrt, weil es so viele dynamischen Stücke sind. Alle ??? sind die Orte, die ich nicht weiß, was ich setzen soll.

Zusammenfassend möchte ich, dass der Benutzer einen Schlüssel dynamisch hinzufügt, einen Wert paarweise mit dem Formular verknüpft und sie diese Schlüsselpaarwerte bearbeiten können, wie sie wollen, bevor das Formular schließlich übergeben wird. Wie kann ich das machen?

Quelle

2016-05-27 Captain Rib

Ausgezeichnete Frage, Kapitän Rib – BobDoolittle

Ich glaube, Sie über komplizieren dieses Problem sein kann. Es scheint, als ob Sie nur dynamisch Schlüssel/Wert-Paare hinzufügen müssen, und geben Sie dann die Möglichkeit, den Schlüssel und den Wert für jedes Paar vor der Übergabe zu ändern.

Wie es derzeit aussieht, können Sie in einer verschachtelten Dropdown-Liste nicht einfach eine Option zum Bearbeiten erneut auswählen.

EDIT: Aktualisiert eine statische Liste der Schlüssel zu verwenden:

Arbeiten plunker.

Vorlage:

<body ng-app="app"> 
    <div ng-controller="OptionsCtrl"> 
     <label>Key</label> 
     <select ng-model=tempOption.key> 
     <option ng-repeat="key in keys">{{key}}</option> 
     </select> 

     <label>Value</label> 
     <input type="text" ng-model="tempOption.value" /> 

     <button type="button" 
     data-ng-click="addOption()">Add Options 
     </button> 
     <div ng-repeat="option in optionArray | orderBy:'key'"> 
     <label>Key</label> 
     <input type="text" ng-model="option.key" /> 

     <label>Value</label> 
     <input type="text" ng-model="option.value" /> 
     </div> 

     <h4>Current Data</h4> 
     <div ng-repeat="option in optionArray | orderBy:'key'"> 
     <label>Key:</label> 
     <label ng-bind="option.key"></label> 

     <label>Value:</label> 
     <label ng-bind="option.value"></label> 
     </div> 
    </div> 
</body>

Controller:

var app = angular.module('app', []); 
app.controller('OptionsCtrl', ['$scope', function($scope) { 
    $scope.tempOption = {}; 
    $scope.keys = ['key1', 'key2', 'key3']; 
    $scope.optionArray = []; 
    $scope.addOption = function() { 
    var temp = { 
     key: $scope.tempOption.key, 
     value: $scope.tempOption.value 
    }; 
    $scope.optionArray.push(temp); 
    $scope.tempOption = {}; 
    } 
}]);

Quelle

2016-05-27 01:15:08

Ein Problem dabei ist, dass wir die Schlüssel kommen aus einer vordefinierten Auswahlliste nicht beliebiger Text eingeben möchten . – BobDoolittle

@BobDoolittle wer sind wir? Das ist nicht meine Interpretation der Anfrage des OP. –

Er und ich arbeiten zusammen. Vertrau mir dieses mal. – BobDoolittle

<button type="button" data-ng-click="addOption()">Add Options</button> 

<div ng-repeat="option in optionArray"> 
    <input type="text" ng-model="option.key"> 
    <input type="text" ng-model="option.value"> 
</div> 

$scope.optionArray = []; 
$scope.addOption = function() { 
    var temp = { 
     key:null, 
     value:null 
    }; 
    optionArray.push(temp); 
}

Quelle

2016-05-27 01:13:35 Josh

Dynamisch hinzufügen Schlüsselpaar Wert $ Scope-Variable und binden sie mit Label und Eingabe

Antwort

Verwandte Themen