我想用一些动态问题(fiddle here)填充一个表单:
<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}}"]);
};
}
一切正常,除了模型是字面上的答案“{{question.Name}}”,而不是评估的答案“GenderQuestion”。如何动态设置模型名称?
发布于 2012-09-24 05:55:18
你可以简单的将javascript表达式放在ng-model
中。
发布于 2015-08-19 21:03:51
您可以使用类似这样的scopeValue[field]
,但是如果您的字段位于另一个对象中,则需要另一个解决方案。
要解决所有情况,可以使用以下指令:
this.app.directive('dynamicModel', ['$compile', '$parse', function ($compile, $parse) {
return {
restrict: 'A',
terminal: true,
priority: 100000,
link: function (scope, elem) {
var name = $parse(elem.attr('dynamic-model'))(scope);
elem.removeAttr('dynamic-model');
elem.attr('ng-model', name);
$compile(elem)(scope);
}
};
}]);
Html示例:
<input dynamic-model="'scopeValue.' + field" type="text">
发布于 2013-04-13 02:43:22
我最终做的事情是这样的:
在控制器中:
link: function($scope, $element, $attr) {
$scope.scope = $scope; // or $scope.$parent, as needed
$scope.field = $attr.field = '_suffix';
$scope.subfield = $attr.sub_node;
...
因此,在模板中,我可以使用完全动态的名称,而不仅仅是在某个硬编码元素下(就像你的"Answers“案例):
<textarea ng-model="scope[field][subfield]"></textarea>
希望这能有所帮助。
https://stackoverflow.com/questions/12553617
复制相似问题