i have designed a main form with textbox and button(when button is clicked modal popup must open).inside modal popup there are two text boxes and a submit button.i am performing subtraction operation inside modal popup. after submit button is clicked inside modal popup,modal popup is closed and result must be shown in textbox which is on the main form and also a new row will be added automatically with a button and a textbox.the problem is when submit button is clicked inside popup, the result is showing same in main form textbox and also added row text box here is the 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 () {



               column1: 'row #' + $scope.rows.length,
               column2: 'this is new',
               column3: true

        $scope.result = $scope.val - $scope.value;



//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>*@
    @*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" /> 

Recommended Answers

All 2 Replies

Hmm..At first look it seems pretty good, though I'm not well-experienced in js. Hope, you'll solve it

Actually, don't have any idea regarding this. Can somebody guide in detail responding to this answer.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, learning, and sharing knowledge.