AngularJS动态生成文本框及双向绑定与JSON构建技术问询

嘿，作为AngularJS新手能搞定动态生成模态框表格已经超棒啦！我来一步步帮你实现双向绑定和目标格式的JSON对象：

1. 初始化绑定对象（控制器部分） #

首先在你的控制器里创建一个空对象，用来存储用户输入的属性值——这个对象就是我们要的JSON结构雏形：

angular.module('yourApp').controller('YourModalController', function($scope) {
  // 假设服务器返回的属性数据是这个结构（根据实际接口返回替换）
  $scope.prop = {
    "NAME": "",
    "TYPE": "forest"
  };

  // 初始化绑定对象，把服务器返回的默认值先同步进去
  $scope.formData = angular.copy($scope.prop);
});

用angular.copy是为了避免直接修改原始的服务器返回数据，保证源数据的独立性。

2. 修改HTML模板实现双向绑定 #

把你原来的表格行改造一下，给每个动态生成的文本框绑定到formData[key]，这样用户输入的内容会自动同步到formData对象里：

<div class="modal-content">
  <table>
    <tr ng-repeat="(key, value) in prop">
      <td><strong>{{key}}</strong></td>
      <td>
        <!-- 双向绑定到formData的对应属性，自动同步输入内容 -->
        <input type="text" ng-model="formData[key]" placeholder="请输入{{key}}值">
      </td>
    </tr>
  </table>
  <!-- 可以加个测试按钮查看结果 -->
  <button ng-click="checkResult()">查看生成的JSON</button>
</div>

3. 查看/使用目标JSON对象 #

现在$scope.formData就是你要的{"NAME": "用户输入值", "TYPE": "forest"}格式的对象啦！如果要测试或者提交给后端，直接在控制器里加个方法：

$scope.checkResult = function() {
  console.log($scope.formData);
  // 这里可以直接把formData传给后端接口，或者做其他业务处理
};

关键知识点提醒 #

• 双向绑定的核心：AngularJS的ng-model需要绑定到对象的属性（而非单个变量），这样能避免作用域继承带来的绑定失效问题——这也是我们用formData[key]的原因。
• 动态适配性：ng-repeat="(key, value) in prop"会自动遍历服务器返回的所有属性，不管后续属性怎么变化，都能自动生成对应的输入框，完全适配动态需求。

内容的提问来源于stack exchange，提问作者User123