Question

我正在尝试从一行（单击一次）获取数据以填充具有该行数据的弹出模式窗口。然后您应该能够更改数据并重新提交，更新表中的数据。

以下是我的表格的代码，然后是模态。

通过$ http get请求检索填充表的数据，但是当模式中的数据发生更改并且随后更新表时，检索到的json文件不需要更新。

我觉得我已经进行了大量的搜索，但所有其他答案都指向了我所寻求的不同方向，或者我正在寻找错误的东西。

我不是在寻求一个完整的解决方案，但如果有人能够指导我朝着正确的方向发展，那将会非常有帮助。提前感谢您可以分享的任何知识。

重申一下，这就是我正在努力的目标：

“我正试图从一行中获取数据（一旦点击）以填充具有该行数据的弹出模式窗口。然后您应该能够更改数据并重新提交，更新数据桌子。“

<body>
  <div data-ng-app="peopleInformation" data-ng-controller="myCtrl" class="jumbotron">
  <div class="panel panel-default">
      <div class="panel-heading">Essential Information</div>
          <div class="table-responsive">
              <table class="table table-hover">
                  <thead>
                      <tr>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Age</th>
                        <th>Nickname</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr data-ng-repeat="data in myData" data-ng-click="modify(data)">
                        <td>{{ data.FirstName }}</td>
                        <td>{{ data.LastName }}</td>
                        <td>{{ data.Age }}</td>
                        <td>{{ data.Nickname }}</td>
                      </tr>
                  </tbody>                    
              </table>
              <button type="button" class="btn btn-info pull-right" data-ng-click="new()">Add
              </button>
          </div>
      </div>
   </div>
</body>

这是我的模态html：

<div class="modal fade" role="dialog">
      <div class="modal-dialog">   
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Your row of data</h4>
          </div>
          <div class="modal-body" name="modelData">
              <form class="form-horizontal pull-left form-width" role="form">
                  <div class="form-group">
                    <label class="control-label col-sm-4" for="first">First Name:</label>
                    <div class="col-sm-8">
                      <input type="text" class="form-control" id="first" ng-bind="FirstName">
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="control-label col-sm-4" for="last">Last Name:</label>
                    <div class="col-sm-8"> 
                      <input type="text" class="form-control" id="last" ng-bind="LastName">
                    </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="age" ng-bind="Age">
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="control-label col-sm-4" for="nick">Nickname:</label>
                    <div class="col-sm-8"> 
                      <input type="text" class="form-control" id="nick" ng-bind="Nickname">
                    </div>
                  </div>
              </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-danger pull-left" data-dismiss="modal">Cancel</button>
            <button type="button" class="btn btn-success pull-right" data-dismiss="modal">Submit</button>
          </div>
        </div>
      </div>
    </div>

到目前为止，这是我的JS：

var app = angular.module('peopleInformation', ['ngAnimate','ui.bootstrap']);

app.controller('myCtrl', function($scope, $http, $uibModal) {

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

$scope.modify = function(currentData){

    var modalInstance = $uibModal.open({
        templateUrl: 'myModalContent.html',
        controller: 'ModalInstanceCtrl',
        resolve: {
            details: function() {
                return currentData;
            }
        }   
    });

};
});   

app.controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, details){
$scope.FirstName = details.FirstName;
$scope.LastName = details.LastName;
$scope.Age = details.Age;
$scope.Nickname = details.Nickname;
});

将数据从表绑定到模态

0 个答案: