Ich möchte ein Formular mit einigen dynamischen Fragen füllen (Geige hier ):
<div ng-app ng-controller="QuestionController">
<ul ng-repeat="question in Questions">
<li>
<div>{{question.Text}}</div>
<select ng-model="Answers['{{question.Name}}']" ng-options="option for option in question.Options">
</select>
</li>
</ul>
<a ng-click="ShowAnswers()">Submit</a>
</div>
function QuestionController($scope) {
$scope.Answers = {};
$scope.Questions = [
{
"Text": "Gender?",
"Name": "GenderQuestion",
"Options": ["Male", "Female"]},
{
"Text": "Favorite color?",
"Name": "ColorQuestion",
"Options": ["Red", "Blue", "Green"]}
];
$scope.ShowAnswers = function()
{
alert($scope.Answers["GenderQuestion"]);
alert($scope.Answers["{{question.Name}}"]);
};
}
Alles funktioniert, außer dass das Modell buchstäblich Answers ["{{question.Name}}"] anstelle der ausgewerteten Answers ["GenderQuestion"] ist. Wie kann ich diesen Modellnamen dynamisch festlegen?
ng-pattern="field.pattern"
als das, was ich wirklich wollte, warpattern="{{field.pattern}}"
. Es ist etwas verwirrend, dass Angular normalerweise einen Helfer für dynamische Attribute darstellt, aber diesmal wurde eine eigene clientseitige Validierung geschrieben und derselbe Name vergeben.Sie können so etwas verwenden
scopeValue[field]
, aber wenn sich Ihr Feld in einem anderen Objekt befindet, benötigen Sie eine andere Lösung.Um alle Arten von Situationen zu lösen, können Sie diese Anweisung verwenden:
HTML-Beispiel:
quelle
ng-model="{{ variable }}"
:)Was ich letztendlich gemacht habe, ist ungefähr so:
In der Steuerung:
In den Vorlagen konnte ich also völlig dynamische Namen verwenden, und zwar nicht nur unter einem bestimmten fest codierten Element (wie in Ihrem Fall "Antworten"):
Hoffe das hilft.
quelle
Um die Antwort von @abourget vollständiger zu machen, kann der Wert von scopeValue [Feld] in der folgenden Codezeile undefiniert sein. Dies würde zu einem Fehler beim Einstellen des Unterfelds führen:
Eine Möglichkeit, dieses Problem zu lösen, besteht darin, ein Attribut ng-focus = "nullSafe (Feld)" hinzuzufügen, sodass Ihr Code wie folgt aussehen würde:
Dann definieren Sie nullSafe (Feld) in einem Controller wie folgt:
Dies würde sicherstellen, dass scopeValue [Feld] nicht undefiniert ist, bevor ein Wert auf scopeValue [Feld] [Unterfeld] festgelegt wird.
Hinweis: Sie können ng-change = "nullSafe (Feld)" nicht verwenden, um dasselbe Ergebnis zu erzielen, da ng-change nach dem Ändern des ng-Modells erfolgt. Dies würde einen Fehler auslösen, wenn scopeValue [Feld] nicht definiert ist.
quelle
Oder Sie können verwenden
quelle