AngularJS点击对应Set按钮触发多输入框问题求助（附代码）

Hey there, let's break down why all inputs are being sent regardless of which button you click, and fix it step by step:

The Root Problem #

Your setCalibration function is hardcoding all three d1, d2, d3 values into the calib object every time the form submits. Plus, all buttons are type="submit", so they all trigger the same undifferentiated submission logic.

Step 1: Update the Submission Logic to Target Only Selected Input #

We'll use the $scope.disp variable you're setting via ng-click to dynamically build the calib object with only the relevant value.

Step 2: Modify the setCalibration Function #

Replace your existing function with this version:

$scope.setCalibration = function () {
  // Start with an empty calibration object
  var calibData = {};
  
  // Add only the selected value based on the clicked button
  switch($scope.disp) {
    case 'd1':
      calibData.d1 = $scope.d1;
      $scope.d1 = ''; // Clear only the submitted input
      break;
    case 'd2':
      calibData.d2 = $scope.d2;
      $scope.d2 = '';
      break;
    case 'd3':
      calibData.d3 = $scope.d3;
      $scope.d3 = '';
      break;
  }

  var dataSent = {
    uid: $scope.uid,
    dispenser: $scope.disp,
    calib: calibData
  };

  console.log($scope.disp);
  console.log(dataSent);
  console.log(dataSent.calib);

  $http.post('/v1/atm/calib/update', dataSent)
    .then(function (response) {
      $rootScope.calib = response.data;
      $scope.calibration = $rootScope.calib;
      console.log($scope.calibration);
      console.log($rootScope.calib);
    }, function (error) {
      console.log('Submission error:', error);
    });
};

Step 3: Refine Button Behavior (Optional but Cleaner) #

Change the buttons from type="submit" to type="button" and call the function directly in ng-click to avoid unintended form submission side effects. Update your HTML buttons section to:

<div class="text-center">
  <button type="button" class="btn btn-primary btn-md" ng-click="disp = 'd1'; setCalibration()">Set D1</button>
  <button type="button" class="btn btn-primary btn-md" ng-click="disp = 'd2'; setCalibration()">Set D2</button>
  <button type="button" class="btn btn-primary btn-md" ng-click="disp = 'd3'; setCalibration()">Set D3</button>
</div>

Then remove the ng-submit="setCalibration()" attribute from your <form> tag—we don't need it anymore since we're triggering the function directly.

Step 4: Fix Invalid ng-model Usage in Display Divs #

Your <div> elements with ng-model won't work as intended (ng-model is for form controls, not static display). Update those sections to use interpolation instead:

<!-- For D1 column -->
<div ng-cloak>{{calibration.result.calibration.d1}}</div>
<div ng-cloak>{{calib.calib.d1}}</div>

<!-- Repeat for D2 and D3 columns -->
<div ng-cloak>{{calibration.result.calibration.d2}}</div>
<div ng-cloak>{{calib.calib.d2}}</div>

<div ng-cloak>{{calibration.result.calibration.d3}}</div>
<div ng-cloak>{{calib.calib.d3}}</div>

With these changes, clicking each "Set Dx" button will only send the corresponding input's value, and clear just that input field after submission.

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