TECHNOLOGIES
FORUMS
JOBS
BOOKS
EVENTS
INTERVIEWS
Live
MORE
LEARN
Training
CAREER
MEMBERS
VIDEOS
NEWS
BLOGS
Sign Up
Login
No unread comment.
View All Comments
No unread message.
View All Messages
No unread notification.
View All Notifications
Answers
Post
An Article
A Blog
A News
A Video
An EBook
An Interview Question
Ask Question
Forums
Monthly Leaders
Forum guidelines
manikanth mahankali
NA
6
692
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">×</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" />
Reply
Answers (
3
)
[$injector:modulerr] Failed to instantiate module MyApp due
AngularJs- Download pdf file using Anchor tag in angularjs