Bootstrap angular ui 模态未更新或显示字段数据

Question

所以我要做的是从行数据中获取数据，并将该行中的对象属性显示到模态视图内的字段上。此外，当按下提交按钮时 - 编辑的字段值应编辑其相应的行数据。

我有以下代码，但字段值不显示此人的对象属性，提交按钮也不更新 table。

如有任何帮助，我们将不胜感激。

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

<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索引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');
        };

    };

});

提前谢谢你。我是 Whosebug 的新手，所以如果做错了什么，请通过评论告诉我，我会全部更新！ :)

Answer 1

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

应该是

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

有关详细信息，请参阅 difference between ng-bind and ng-model。

我也做了一个例子your code working on plnkr with ng-model。

Bootstrap angular ui 模态未更新或显示字段数据

Bootstrap angular ui modal not updating or showing field data

javascript

twitter-bootstrap

angularjs

bootstrap-modal

angularjs-bootstrap