AngularJS动态多层级标签页控件数据获取方法咨询

Hey there! Let's solve this problem using AngularJS's built-in two-way data binding—this is the cleanest approach instead of digging into the DOM to grab values manually. Here's how to implement it step by step:

1. Refactor Your Data Model for Binding #

First, update your original JSON structure to include bindable properties for each input. Instead of plain strings, use objects that define the control type and initial value. This makes it easy to map to form controls and track user changes:

$scope.tabstest1 = {
  "MasterTab1": {
    "tab1": [
      { type: "text", value: "somedata1-1", label: "Text Input 1" },
      { type: "select", value: "option1", label: "Dropdown 1", options: ["option1", "option2", "option3"] }
    ],
    "tab2": [
      { type: "text", value: "somedata2-1", label: "Text Input 2" }
    ]
  },
  "MasterTab2": {
    "tab1": [
      { type: "text", value: "somedata2-1-1", label: "Text Input 3" }
    ],
    "tab2": [
      { type: "checkbox", value: false, label: "Checkbox 1" }
    ],
    "tab3": [
      { type: "select", value: "optionA", label: "Dropdown 2", options: ["optionA", "optionB"] }
    ]
  }
};

2. Update Your Template to Bind Controls #

Modify your nested tab template to dynamically render controls and bind them to the value property of each data object using ng-model:

<tabset class="tabbable-line">
  <tab ng-repeat="(masterKey, masterValue) in tabstest1" heading="{{masterKey}}">
    <tabset class="tabbable-line">
      <tab ng-repeat="(subKey, subValue) in masterValue" heading="{{subKey}}">
        <div ng-repeat="control in subValue" style="margin: 10px 0;">
          <label>{{control.label}}</label>
          <!-- Text Input -->
          <input type="text" ng-model="control.value" ng-if="control.type === 'text'" style="margin-left: 8px;">
          <!-- Dropdown -->
          <select ng-model="control.value" ng-if="control.type === 'select'" style="margin-left: 8px;">
            <option ng-repeat="opt in control.options" value="{{opt}}">{{opt}}</option>
          </select>
          <!-- Checkbox -->
          <input type="checkbox" ng-model="control.value" ng-if="control.type === 'checkbox'" style="margin-left: 8px;">
        </div>
      </tab>
    </tabset>
  </tab>
</tabset>

<!-- Button to Trigger Data Capture -->
<button ng-click="getAllTabData()" style="margin: 15px;">Get All User Inputs</button>

3. Add the Data Capture Method in Your Controller #

Since AngularJS syncs ng-model values with your data model in real-time, you can simply access the tabstest1 object directly to get all user inputs. Add this method to your controller:

$scope.getAllTabData = function() {
  // Create a copy to avoid accidental mutation of the original model
  const allUserData = angular.copy($scope.tabstest1);
  console.log("All User Inputs:", allUserData);
  
  // You can process or send this data to a backend here
  // Example: $http.post('/api/submit-form', allUserData);
};

Why This Works #

AngularJS's two-way data binding ensures that every change a user makes to a control is immediately reflected in your tabstest1 model. When you click the button, you're just reading the already-updated model—no need to loop through DOM elements or extract values manually. This approach is maintainable, scalable, and aligns with AngularJS's core principles.

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