Bootstrap angular ui modal not updating or showing field data

Question

So what I'm trying to do is get the data from the row data and display the properties of the object from that row onto the fields inside the modal view. Also, when the submit button is pressed - The edited field values should edit its corresponding row data.

I've got the following code but the field values do not display the person's object properties and the submit button doesn't update the table either.

Any help would be appreciated.

HTML CODE:

<!DOCTYPE html>
<html>
    <head>
        <script src="angular.js"></script>      
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        <script src="ui-bootstrap-tpls-1.3.3.js"></script>
        <script src="index.js"></script>
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
        <link rel="stylesheet" href="site.css">
    </head>
    <body>
        <div class="containter">
            <div class="jumbotron">
                <h1>JSON to Table</h1>
            </div>
            <div ng-app="myTable" ng-controller="tableCtrl">
                <div id="table1Div" style="background:white;position absolute;">
                    <table class="table table-hover table-bordered" id="peopleTable">
                        <tr>
                            <th>First Name</th>
                            <th>Last Name</th>
                            <th>Age</th>
                            <th>Nickname</th>
                        </tr>
                        <tr ng-repeat="person in people" ng-click="change(person)">
                            <td>
                                {{person.FirstName}}
                            </td>
                            <td>
                                {{person.LastName}}
                            </td>
                            <td>
                                {{person.Age}}
                            </td>
                            <td>
                                {{person.Nickname}}
                            </td>
                        </tr> 
                    </table>
                </div>
                <div ng-include="modalTemplate.html"></div>
                <div class="centered">
                    <button type="button" class="btn btn-primary" data-ng-click="addNewEntry()">Add New Entry</button>
                </div>
                <div id="searchFirstName">
                    <div class="panel panel-primary">
                        <div class="panel-heading">Change Table Background Colour: </div>
                        <div class="panel-body">
                            <div id"buttonAndColours">
                                <button class="btn btn-primary" id="tableBackgroundButton" style="float: right">Change</button>
                                <div class="colours" style="background-color:red;"></div>
                                <div class="colours" style="background-color:yellow;"></div>
                                <div class="colours" style="background-color:lightBlue;"></div>
                                <div class="colours" style="background-color:green;"></div>
                                <div class="colours" style="background-color:white;"></div>
                            </div>
                        </div>
                    </div>
                    <div class="panel panel-info">
                        <div class="panel-heading">Search For First Name in Table:</div>
                        <div class="panel-body">
                            <p>Search: <input type="text" ng-model="searchText"/> First Name being searched for: <u><b>{{searchText}}</u></b></p>
                            <br/>
                            <table class="table table-condensed">
                                <tr>
                                    <th>First Names to be Searched For:</th>
                                </tr>
                                <tr ng-repeat="person in people | filter:searchText">
                                    <td>{{ person.FirstName }}</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

ModalView Template Code:

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title">Row Data</h4>
</div>
<div class="modal-body" name="modalData">
    <form class="form-horizontal form-width" role="form">
        <div class="form-group">
            <label class="control-label col-sm-4" for="firstname">First Name:</label>
            <div class="col-sm-8">
                <input type="text" class="form-control" id="firstN" ng-bind="FirstNameField">
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-4" for="lastname">Last Name:</label>
            <div class="col-sm-8"> 
                <input type="text" class="form-control" id="lastN" ng-bind="LastNameField">
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-4" for="age">Age:</label>
            <div class="col-sm-8"> 
                <input type="text" class="form-control" id="ageN" ng-bind="AgeField">
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-4" for="nickname">Nickname:</label>
            <div class="col-sm-8"> 
                <input type="text" class="form-control" id="nickN" ng-bind="NicknameField">
            </div>
        </div>
    </form>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-danger" data-dismiss="modal" ng-click="cancel()">Cancel</button>
    <button type="button" class="btn btn-success" data-dismiss="modal" ng-click="submitData()">Submit</button>
</div>

HTML Index Javascript File Code:

var myTable = angular.module('myTable', ['ui.bootstrap']);

myTable.controller('tableCtrl', function($scope, $http, $uibModal) {

    $http.get("xxxxxxxx.json").success(function(response){
        $scope.people = response.People;
    });

    $scope.change = function(changeableData) {
        var modalInstance = $uibModal.open({
            templateUrl: 'modalView1.html',
            controller: ModalInstanceCtrl,
            size: 'lg',
            resolve: {
                person: function() {
                    return changeableData;
                }
            }
        });
    };

    var ModalInstanceCtrl = function($scope, $uibModalInstance, person) {

        $scope.FirstNameField = person.FirstName;
        $scope.LastNameField = person.LastName;
        $scope.AgeField = person.Age;
        $scope.NicknameField = person.Nickname;

        $scope.cancel = function () {
            $uibModalInstance.dismiss('cancel');
        };
        $scope.submitData = function () {
            console.log("Submitted Data");

            person.FirstName = $scope.FirstNameField;
            person.LastName = $scope.LastNameField;
            person.Age = $scope.AgeField;
            person.Nickname = $scope.NicknameField;

            $uibModalInstance.dismiss('submit');
        };

    };

});

Thank you in advance. I'm new to StackOverflow, so anything done wrong, please do let me know via comments and I'll update it all! :)

Answer 1

<input type="text" ng-bind="...">

should be

<input type="text" ng-model="...">

See difference between ng-bind and ng-model for more information.

I also made an example of your code working on plnkr with ng-model .

Bootstrap angular ui modal not updating or showing field data

Question

1 answers

solution1
2 ACCPTED 2016-06-18 19:06:04

Bootstrap angular ui modal not updating or showing field data

Question

1 answers

solution1 2 ACCPTED 2016-06-18 19:06:04

solution1
2 ACCPTED 2016-06-18 19:06:04