如何在AngularJS中设置动态模型名称？
如何在AngularJS中设置动态模型名称？
提问于 2012-09-23 23:32:11
我想用一些动态问题(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”。如何动态设置模型名称？
回答 5
Stack Overflow用户
回答已采纳
发布于 2012-09-24 05:55:18
你可以简单的将javascript表达式放在ng-model中。
Stack Overflow用户
发布于 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">Stack Overflow用户
发布于 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>希望这能有所帮助。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12553617
复制相关文章
相似问题