基于下拉列表中选项的选择动态更新表格的Angularjs代码
Posted
技术标签:
【中文标题】基于下拉列表中选项的选择动态更新表格的Angularjs代码【英文标题】：Angularjs code for the dynamic update of the table based on the selection of option in the dropdown 【发布时间】：2020-07-10 22:36:31 【问题描述】：我是 Angularjs 的新手。我在 UI 中有一个表格和一个按钮（更新）。我在表格的第 3 列中有一个下拉选项。现在，根据我在下拉列表中选择的选项，然后单击“更新”按钮，表格第 4 列和第 5 列应该用计算值更新对应于 modelId 和选择的公式。
我已附上代码。请帮助我使用下拉菜单和 js 函数来更新单击更新按钮时的值。
附上img，便于理解。
enter image description here
enter code here
<!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>
<script src="script.js"></script>
<link
href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"
type='text/css' rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body ng-controller="MainCtrl">
<div class="row">
<div class='col-sm-12'>
<div class="form-group" style="padding-left:15px">
<div>
<input type="button" value="Update" ng-click="update()"
class="btn btn-primary" />
</div>
</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" ng-model="model">
<td>model.modelid</td>
<td>model.mrs</td>
<td>model.formula</td>
<td>model.score1</td>
<td>model.score2</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
<script>
app.controller('MainCtrl', ['$scope','$filter', function ($scope,
$filter)
$scope.models = [
id: 1, 'modelid': 'model1', 'mrs': 'high', 'score 1':'2.4' ,'score
2':'28.4',
id: 2, 'modelid': 'model2', 'mrs': 'low', 'score 1':'20.6','score
2':'45.4',
id: 3, 'modelid': 'model3', 'mrs': 'medium', 'score 1':'34','score
2':'9.4'
];
$scope.update = function()
;
</script>
</html>
【问题讨论】：
你这里有一些代码，也许可以提供一些帮助。 我已经添加了 【参考方案1】：您好，js 需要整理一下，这正是您想要的。 我是 angularjs 的新手，但这看起来有点像 knockoutjs。 在 knockoutjs 中有计算变量，所有内容都在需要时更新。 所以你不需要更新按钮。 但我是 angularjs 新手，看起来有点棘手。
至于你的问题，我只是输入了一些随机值，因为我不知道你想要什么等式。但我希望这能向你展示一些基础知识。
<!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">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body ng-controller="MainCtrl">
<div class="row">
<div class='col-sm-12'>
<div class="form-group" style="padding-left:15px">
<div>
<input type="button" value="Update" ng-click="update()"
class="btn btn-primary" />
</div>
</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" ng-model="model">
<td>model.modelid</td>
<td>model.mrs</td>
<td><select ng-model="model.formula" ng-options="x for x in formulas"></select></td>
<td>model.score1</td>
<td>model.score2</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
<script>
var app = angular.module('myApp', []);
app.controller('MainCtrl', ['$scope','$filter', function ($scope, $filter)
$scope.formulas = ["Forumula 1", "Forumula 2", "Forumula 3"];
$scope.models = [
id: 1, 'modelid': 'model1', 'formula':'', 'mrs': 'high', 'score1':'2.4' ,'score2':'28.4', ,
id: 2, 'modelid': 'model2', 'formula':'', 'mrs': 'low', 'score1':'20.6','score2':'45.4',
id: 3, 'modelid': 'model3', 'formula':'', 'mrs': 'medium','score1':'34','score2':'9.4'
];
$scope.update = function()
for(var i = 0;i<$scope.models.length;i++)
if($scope.models[i].formula == "Forumula 1")
$scope.models[i].score1 = Math.floor((Math.random() * 100) + 1) * Math.floor((Math.random() * 100) + 1);
$scope.models[i].score2 = Math.floor((Math.random() * 100) + 1) * Math.floor((Math.random() * 100) + 1);
else if($scope.models[i].formula == "Forumula 2")
$scope.models[i].score1 = Math.floor((Math.random() * 100) + 1)
$scope.models[i].score2 = Math.floor((Math.random() * 100) + 1)
else if($scope.models[i].formula == "Forumula 3")
$scope.models[i].score1 = Math.floor((Math.random() * 10) + 1)
$scope.models[i].score2 = Math.floor((Math.random() * 10) + 1)
]);
</script>
</html>
【讨论】：
以上是关于基于下拉列表中选项的选择动态更新表格的Angularjs代码的主要内容，如果未能解决你的问题，请参考以下文章