Question

我认为我的代码中有一些非常大的漏洞，因为当模式出现时，表格中的内容（当你点击一行产生模态时），不会填充我内部的输入框。模态。我认为我正在以错误的方式解决问题，一些方向会非常棒。

我的JS：

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

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

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

$scope.modify = function(currentData){

    var modalInstance = $uibModal.open({
        animation: true,
        templateUrl: 'myModalContent.html',
        controller:function($scope, $uibModalInstance, details){
                $scope.FirstName = details.FirstName;
                $scope.LastName = details.LastName;
                $scope.Age = details.Age;
                $scope.Nickname = details.Nickname;

            $scope.update = function () {
                $uibModalInstance.dismiss('cancel');
            };
        },
        size: 'lg',
        resolve: {
            details: function() {
                return currentData;
            }
        }   
    });

};
});

我的模态：

              <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" style="height:200px">
                  <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-model="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-model="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-model="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-model="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>

主要HTML，以备不时之需：

<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="details in myData" data-ng-click="modify(details)">
                        <td>{{ details.FirstName }}</td>
                        <td>{{ details.LastName }}</td>
                        <td>{{ details.Age }}</td>
                        <td>{{ details.Nickname }}</td>
                      </tr>
                  </tbody>                    
              </table>
              <button type="button" class="btn btn-info pull-right" data-ng-click="new()">Add
              </button>
          </div>
      </div>
  <div ng-include="myModalContent.html"></div>
 </div>
</body>

我非常擅长使用Angular，所以如果你对我有点过分简单，那将有助于澄清事情，尽管如此，任何帮助都会受到赞赏。

Answer 1

Bellow是角度模态实例控制器

 app.controller('ModalInstanceCtrl', function ($scope,
 $uibModalInstance, item) {

   $scope.customer = item;

   $scope.yes = function () {
     $uibModalInstance.close();   };

   $scope.no = function () {
     $uibModalInstance.dismiss('cancel');   
  }; 
});

bellow是调用角度模态的代码

 $scope.open = function (item) {
     var modalInstance = $uibModal.open({
       animation: true,
       scope: $scope,
       templateUrl: 'myModalContent.html',
       controller: 'ModalInstanceCtrl',
       size: 'md',
       resolve: {
         item: function () {
          return item;
         }
       }
     });

     modalInstance.result.then(function (selectedItem) {
        $log.info(selectedItem);
       });
     }, function () {
       $log.info('Modal dismissed at: ' + new Date());
     });   
   };

Bellow是模板的代码

<script type="text/ng-template" id="myModalContent.html">
    <div class="modal-header">
        <h3 class="modal-title">Re-calculate retail price</h3>
    </div>
    <div class="modal-body">
        Margin percent of selected customer is <b>{{ customer.margin_percent }}</b> <br />
        Do you want to recalculate the retail price?
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" type="button" ng-click="yes()">Yes</button>
        <button class="btn btn-warning" type="button" ng-click="no()">No</button>
    </div>
</script>

Answer 2

在HTML文件中，您传递的是不同的参数来修改函数，它应该等于ng-repeat指令中指定的参数。所以在这种情况下：

<tr data-ng-repeat="data in myData" data-ng-click="modify(details)">

将成为：

<tr data-ng-repeat="details in myData" data-ng-click="modify(details)">

Answer 3

我实际上是在错误的地方分配值，我相信。我移动了：

$scope.FirstName = details.FirstName;

在var modalInstance变量之外，现在它们正在填充输入框。如果这是凌乱或不标准，那么让我知道，因为有时候正确的结果并不总是正确的方法。感谢那些试图提供帮助的人，非常感谢。

将值分配给Angular-ui模态

3 个答案: