AngularJS: Value from Page Not Showing in Modal on Click

Question

I have a button (link) on a modal that when clicked (copySummaryToTask($event)) is supposed to copy data from the page's $scope element (thisRequest) into the modal's $scope element (nTask). It copies the correct data into the $scope but the data doesn't appear in the modal even though I am using $scope.$apply();

Here's the plunkr.

Here's my controller:

var myApp = angular.module('myApp', []);

myApp.controller('MainController', function($scope){

  $scope.NewTaskPane = false;

  $scope.thisRequest = {
    ID: 543,
    Title: 'Create This Wonderful SharePoint 2013 SPA',
    Request_Summary: "Rule fruit and under female she'd every signs creepeth good Night, fly lesser they're be green cattle and living tree also spirit us years two. Seasons he good under creepeth fifth air is. For morning. It creeping multiply from, saying.",
    Request_Type: 'Web'
  };

  $scope.Tasks = [
    {ID: 20, Title: 'Prototype App', Assigned_To: 'Wayne, Bruce', Status: 'Completed', TOT: 4.5},
    {ID: 21, Title: 'Develop App CSS', Assigned_To: 'Prince, Diana', Status: 'Completed', TOT: 6}  
  ];


  $scope.addNewTask = function($event){
    $event.preventDefault();
    $scope.NewTaskPane = true;
    $scope.nTask = {
        ID: $scope.Tasks.length + 1,
        Request_ID: $scope.thisRequest.ID,
        Title: $scope.thisRequest.Title,
        Status: 'Assigned',
        Resource_Instructions: ''
    };
  };

  $scope.copySummaryToTask = function($event){
    $event.preventDefault();
    //alert($scope.thisRequest.Request_Summary);
    $scope.nTask.Resource_Instructions = $scope.thisRequest.Request_Summary;
    if (!$scope.$$phase) { $scope.$apply(); }
  } // end copySummaryToTask fn

}); // end main controller

and here's the view:

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <link data-require="[email protected]" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script data-require="bootstrap@*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="MainController">
    <div id="overlay" data-ng-show="NewTaskPane">
        <div class ="preference_form wModal" id="frmPreference">
            <form name="frmNewTask" ng-submit="saveNewTask($event)">
                <span class="close-modal">
                    <a href="#" ng-click="NewTaskPane = false">close</a>
                </span>
                <h1>New Task</h1>
                <div class="row">
                    <div class="form-group col-lg-12">
                        <label for="description">Task Title:</label>
                        <input type="text" class="form-control" name="Title" ng-model="nTask.Title">
                    </div>
                </div>

            <div class="row">
                <div class="form-group col-lg-12">
                    <label>Additional Instructions for Resource:</label>
                    <textarea class="form-control" rows="5">{{ntask.Resource_Instructions}}</textarea>
                    <button class="btn btn-link" style="float:right;" ng-click="copySummaryToTask($event)">Copy Customer Request Summary.</button>
                </div>
            </div>

            <div class="frmElementSubmit">
                <input type="button" class="btn btn-default" value="CANCEL" ng-click="NewTaskPane = false" />
                <input type="submit" class="btn btn-primary" value="SAVE" ng-click="NewTaskPane = false" />
            </div>
        </form>

        <pre>{{nTask | json}}</pre>

        </div>
    </div>

    <div class="frmFull_Page">
        <h1 class="frmTitle">Edit Request</h1>
        <div class="frmBar clr-purple">
            <h3>Request Information</h3>
        </div>

        <div class="frm_pane">
            <div class="row">
                    <form name="EditSapForm" role="form">

                        <!-- ID / TITLE -->
                        <div class="row">
                            <div class="form-group col-lg-3">
                                <label for="req_id">Request ID:</label>
                                <input type="text" class="form-control" name="ID" ng-model="thisRequest.ID" disabled="disabled">
                            </div>
                            <div class="form-group col-lg-9">
                                <label for="title">Title:</label>
                                <input type="text" class="form-control" id="Title" ng-model="thisRequest.Title">
                            </div>
                        </div>

                        <!-- WORK SUMMARY -->
                        <div class="row">
                            <div class="form-group col-lg-12">
                                <label>Work Summary:</label>
                                <textarea name="Request_Summary" class="form-control" rows="5" ng-model="thisRequest.Request_Summary"></textarea>
                            </div>
                        </div>

                        <!-- WORK TASKS*** -->
                        <div class="row">
                            <div class="form-group col-lg-12">
                                <div class="row">
                                    <div class="form-group col lg-12" style="margin-left:16px;">
                                        <label>Work Tasks [{{Tasks.length}}]</label>
                                        <table class="table table-striped" style="width:90%; margin:5px auto;">
                                            <tr>
                                                <th>ID</th>
                                                <th>TITLE</th>
                                                <th>ASSIGNED TO:</th>
                                                <th>STATUS</th>
                                                <th>TOT</th>
                                                <th>&nbsp;</th>
                                            </tr>
                                            <tr ng-hide="Tasks.length">
                                                <td colspan="6"><b>No Tasks Found!</b></td>
                                            </tr>
                                            <tr ng-repeat="task in Tasks">
                                                <td>{{task.ID}}</td>
                                                <td>{{task.Title}}</td>
                                                <td>{{task.Assigned_To}}</td>
                                                <td>{{task.Status}}</td>
                                                <td>{{task.TOT}}</td>
                                                <td><a href="#/edittask/{{task.ID}}">edit</a></td>
                                            </tr>
                                            <tr>
                                                <td colspan="6"><a ng-click="addNewTask($event)">Add New Task</a></td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- SUBMIT BUTTON*** -->
                        <div class="row" style="margin-top:30px;">
                            <div class="form-actions col-lg-12">
                                <button type="submit" class="btn btn-primary">SUBMIT</button>
                            </div>
                        </div>
                    </form>
            </div> <!-- end row -->
        </div> <!-- end frm_pane -->
    </div> <!-- end frmFull_Page-->
  </body>

</html>

Marc Kline · Accepted Answer · 2014-05-14 12:53:35Z

1

There's a typo in your view:

<textarea class="form-control" rows="5">{{ntask.Resource_Instructions}}</textarea>

... where ntask should be nTask. Once you fix it, you won't need the $scope.apply():

$scope.copySummaryToTask = function($event){
    $event.preventDefault();
    $scope.nTask.Resource_Instructions = $scope.thisRequest.Request_Summary;
} // end copySummaryToTask fn

answered May 14, 2014 at 12:53

Marc Kline

9,4091 gold badge35 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Konstantinos · Accepted Answer · 2014-05-14 13:02:00Z

0

Replace

<textarea class="form-control" rows="5">{{ntask.Resource_Instructions}}</textarea>

With

<textarea class="form-control" rows="5" ng-model="nTask.Resource_Instructions"></textarea>

This will do it, plus capture any new text added by the user.

answered May 14, 2014 at 13:02

Konstantinos

1018 bronze badges

Collectives™ on Stack Overflow

AngularJS: Value from Page Not Showing in Modal on Click

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related