我是Angularjs的新手。我在UI中有一个表和一个按钮(更新)。我在表格的第3列中有一个下拉选项。.现在,基于我在下拉列表中选择的选项,然后单击“更新”按钮,应该使用计算值更新表格第4和第5列对应于modelId和所选公式。
我已附上代码。请通过单击更新按钮来帮助我使用下拉列表和js函数来更新值。
附上了img以进行清晰的理解。
enter code here
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script data-require="[email protected]"
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>
嗨,js需要整理一些,这有点像您想要的。我是angularjs的新手,但这似乎有点像knockoutjs。在淘汰表中,有计算变量,一切都在需要时更新。因此,您不需要更新按钮。但是我对angularjs并不陌生,看起来有些棘手。
关于您的问题,我只是输入了一些随机值,因为我不知道您想要什么方程式。但是我希望这向您展示了一些基础知识。
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script data-require="[email protected]"
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>