I am new to Angularjs. I have a table and a button(Update) in UI. I have a drop down option in the 3rd column of the table.. Now, based on the option I select in the drop down and then i click on the "Update" button , the table column 4 and 5 should be updated with calculated values correspondingly for the modelId and the formula selected.
I have attached the code. Kindly help me with the dropdown and the js function to update the values on click of update button.
Attached the img for clear understanding.
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>
Hi the js needed some tidying and this is kinda what you want. I'm new to angularjs but this seems a bit like knockoutjs. In knockoutjs there are computed variables and everything just updates when needed. So you don't need the update button. But I'm new to angularjs and it looks a bit tricky.
As for your problem I just pumped in some random values as I didn't know what equation you wanted.But I hope that this shows you some of the basics.
<!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>