Post
Ask Question
manikanth mahankali

manikanth mahankali

  • NA
  • 6
  • 687

Add row with new button

Oct 18 2016 9:03 AM
 I have designed a form in angular js with modal popup.Inside modal popup two textboxes and a button.i want to perform subtraction of two numbers.After submitting  a button inside modalpopup, the Subtraction result must be shown in textbox which is designed in main form and also next row should be generated automatically with textbox and a button.The problem is after calculation the result is showing same for main form textbox as well as in automatic generated text box. i m attatching  code below.can any one solve my problem?
 
 
//angular code:
var app = angular.module("myApp", []);
app.controller('myCntrl', function ($scope) {
$scope.rows = [
{
column1: 'first row',
column2: 'second column of first row',
column3: false
}
];
$scope.Addrow = function () {
alert("hi");
$scope.rows.push(
{
column1: 'row #' + $scope.rows.length,
column2: 'this is new',
column3: true
}
);
$scope.result = $scope.val - $scope.value;
//$scope.city = $scope.address;
//$scope.Name = $scope.name;
//var a = Number($scope.val);
//var b = Number($scope.value);
//$scope.sum = a - b;
//var c = $scope.sum;
//$scope.result = c;
}
});
//index.cs html
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div>
<div ng-controller="myCntrl">
<br />
<table>
<tr ng-repeat="row in rows">
<td>
<input type="text" ng-model="result" />
</td>
<td width="5%"></td>
<td>
<td>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
</td>
</tr>
</table>
<br />
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<table>
<tr>
<td>
<label> Value1</label>
</td>
<td>
<input type="text" ng-model="v al"/>
</td>
<td></td>
<td>
<label> Value2 </label>
</td>
<td>
<input type="text" ng-model="value"/>
</td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" ng-click="Addrow()" data-dismiss="modal">Submit</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="~/Scripts/ModalModule.js"></script>
//Layout.cs html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
<script src="~/Scripts/angular.min.js"></script>
@*<script src="~/Scripts/angular-route.min.js"></script>*@
@*<script src="~/Scripts/angular-route.min.js"></script>*@
@*for modal popup*@
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="~/Content/Site.css" rel="stylesheet" />
 
 
 

Answers (3)