Bootstrap Angle UI模态不更新或不显示字段数据

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: HTML代码：

<!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: ModalView模板代码：

<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: HTML索引Javascript文件代码：

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! 我是StackOverflow的新手，所以做错了什么，请通过评论告知我，我将全部更新！ :) :)

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. 有关更多信息，请参见ng-bind和ng-model之间的区别。

I also made an example of your code working on plnkr with ng-model . 我还举了一个使用ng-model在plnkr上工作的代码示例。

Bootstrap Angle UI模态不更新或不显示字段数据

问题描述

1 个解决方案

解决方案1
2 已采纳 2016-06-18 19:06:04

Bootstrap Angle UI模态不更新或不显示字段数据

问题描述

1 个解决方案

解决方案1 2 已采纳 2016-06-18 19:06:04

解决方案1
2 已采纳 2016-06-18 19:06:04