在AngularJS中,ng-model指令用于绑定表单元素的值到作用域中的变量。通常情况下,ng-model的名称是在HTML模板中硬编码的,但如果需要动态设置ng-model的名称,则可以使用ng-model的动态绑定。
以下是一个示例,演示如何动态设置ng-model的名称:
HTML模板:
动态绑定的值:
{{[dynamicModelName]}}
AngularJS控制器:
angular.module('myApp', [])
.controller('myCtrl', function($scope) {
$scope.dynamicModelName = ''; // 初始化动态绑定的名称
$scope.setModelName = function(modelName) {
$scope.dynamicModelName = modelName; // 设置动态绑定的名称
};
});
在上面的示例中,我们通过ng-model指令将输入框的值绑定到dynamicModelName
变量。在点击按钮时,我们通过setModelName
函数将输入框的值设置为dynamicModelName
变量,从而动态改变ng-model的名称。在模板中,我们使用{{[dynamicModelName]}}
来动态展示绑定的值。
通过这种方式,你可以根据需要动态设置ng-model的名称,并将表单元素的值绑定到相应的变量中。