AngularJS动态从参数设置ng-model名称_编程开发

AngularJS动态从参数设置ng-model名称

创始人

2024-10-27 08:30:33

0次

在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的名称，并将表单元素的值绑定到相应的变量中。

上一篇：AngularJs动态编号，无需使用$index。

下一篇：AngularJS动态调用图片的ng-src无法显示

AngularJS动态从参数设置ng-model名称

动态绑定的值：

相关内容

热门资讯