AngularJS下拉选择后点击更新按钮动态更新表格列求助

Hey there! Let's get your dropdown and update button working properly. I'll walk through the changes step by step and provide the full working code.

First, let's fix a few small issues in your original code: #

• Closed the missing </th> tag for the Score1 column
• Renamed properties like 'score 1' to score1 (spaces in property names can cause bugs in AngularJS)
• Added the missing module definition (var app = angular.module('myApp', []);) which is required to initialize your AngularJS app

Next, here's the complete implementation: #

<!DOCTYPE html> 
<html ng-app="myApp"> 
<head> 
<meta charset="utf-8" /> 
<title>AngularJS Plunker</title> 
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.3/angular.js" data-semver="1.4.3"> 
</script> 
<link href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" type='text/css' rel="stylesheet"> 
<style>
/* Optional: Add some styling for the dropdowns */
.table select {
  width: 150px;
}
</style> 
</head> 
<body ng-controller="MainCtrl"> 
<div class="row"> 
<div class='col-sm-12'> 
<div class="form-group" style="padding-left:15px; margin: 15px 0;"> 
<input type="button" value="Update" ng-click="update()" class="btn btn-primary" /> 
</div> 
</div> 
</div> 
<div class="row"> 
<div class='col-sm-12'> 
<table class="table table-striped table-bordered"> 
<thead> 
<tr> 
<th>Model ID</th> 
<th>MRS</th> 
<th>Formula</th> 
<th>Score1</th> 
<th>Score2</th> 
</tr> 
</thead> 
<tbody> 
<tr ng-repeat="model in models"> 
<td>{{model.modelid}}</td> 
<td>{{model.mrs}}</td> 
<td>
  <!-- Dropdown for selecting formula -->
  <select ng-model="model.selectedFormula" ng-options="formula.name for formula in formulas" class="form-control">
    <option value="">Select Formula</option>
  </select>
</td> 
<td>{{model.score1}}</td> 
<td>{{model.score2}}</td> 
</tr> 
</tbody> 
</table> 
</div> 
</div> 

<script> 
var app = angular.module('myApp', []); // Added module definition

app.controller('MainCtrl', ['$scope','$filter', function ($scope, $filter){ 
  // Updated model data with proper property names
  $scope.models = [ 
    { id: 1, modelid: 'model1', mrs: 'high', score1: '2.4', score2: '28.4'}, 
    { id: 2, modelid: 'model2', mrs: 'low', score1: '20.6', score2: '45.4'}, 
    { id: 3, modelid: 'model3', mrs: 'medium', score1: '34', score2: '9.4'} 
  ]; 

  // Define your formula options here - customize the calculation logic as needed
  $scope.formulas = [
    { 
      name: "Formula A", 
      calc: function(mrs, modelId) {
        // Example calculation based on MRS value
        if(mrs === 'high') return {score1: 12, score2: 60};
        if(mrs === 'medium') return {score1: 24, score2: 48};
        return {score1: 36, score2: 36};
      }
    },
    { 
      name: "Formula B", 
      calc: function(mrs, modelId) {
        // Example calculation based on Model ID
        const base = modelId === 'model1' ? 5 : modelId === 'model2' ? 10 : 15;
        return {score1: base * 3, score2: base * 6};
      }
    }
  ];

  // Update function to calculate scores
  $scope.update = function() { 
    $scope.models.forEach(model => {
      // Check if a formula is selected for the row
      if(model.selectedFormula) {
        // Run the selected formula's calculation function
        const calculatedScores = model.selectedFormula.calc(model.mrs, model.modelid);
        // Update the score values
        model.score1 = calculatedScores.score1;
        model.score2 = calculatedScores.score2;
      } else {
        // Optional: Alert if no formula is selected
        alert(`Please select a formula for ${model.modelid}!`);
      }
    });
  }; 
}]);
</script> 
</body> 
</html>

Key Features Explained: #

• Dropdown Integration: Each row has a dropdown bound to model.selectedFormula, populated with the formula options we defined in the controller.
• Formula Calculation: Each formula has a calc function that takes the model's mrs and modelid as inputs and returns calculated score1 and score2 values. You can modify these functions to match your actual formula logic.
• Update Function: When the Update button is clicked, it loops through each model, checks if a formula is selected, and applies the calculation to update the scores in real-time.

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