Just starting out with Angularjs and facing a challenge. I have a table with a "Update" button on the UI and a drop-down option in the 3rd column. The requirement is, upon selecting an option from the drop-down and clicking the "Update" button, the values in columns 4 and 5 of the table should be updated with calculated values based on the chosen modelId and formula.
I've shared the code below. Need assistance with implementing the drop-down and the JavaScript function to update the values upon clicking the update button.
For clarity, I have included an image below:
enter code here
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e2838c85978e8390cc8891a2d3ccd6cc9a">[email protected]</a>"
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>