在模态 angular bootstrap 中获取编辑后的值

Question

我想在我的模式中获取新值，但我无法获取新值。我试过 this 但还是不行。我看到的区别是解析 return 在 $scope 上。但是，当我将 return 设置为 $scope 时，var managementModal 无法看到项目。

这是控制器

var templateModal = "<div class='modal-header'>" +
        "<button type='button' class='close' ng-click='cancel()'>×</button>" +
        "</div>" +
        "<div class='modal-body'>" +
            "<span>ID</span> <input type='text' readonly='readonly' name='id' value='{{names.id}}' ng-model='editable.id'><br/>" +
            "<span>Approval</span> <input type='text' name='approval' value='{{names.approval}}' ng-model='editable.approval'><br/>" +
            "<span>Status</span> <input type='text' name='status' value='{{names.status}}' ng-model='editable.status'><br/>" +
            "<span>Orderer</span> <input type='text' name='orderer' value='{{names.orderer}}' ng-model='editable.orderer'><br/>" +
            "<span>Creator</span> <input type='text' name='creator' value='{{names.creator}}' ng-model='editable.creator'><br/>" +
            "<span>Production Type</span> <input type='text' name='production_type' value='{{names.production_type}}' ng-model='editable.production_type'><br/>" +
            "<span>First Posting Date</span> <input type='text' name='date' value='{{names.date}}' ng-model='editable.date'><br/>" +
            "<span>Request Price</span> <input type='text' name='budget' value='{{names.budget}}' ng-model='editable.budget'><br/>" +
        "</div>"+
        "<div class='modal-footer'>" +
            "<button type='button' class='close' ng-click='cancel()'>cancel</button>"+
            "<button type='button' class='close' ng-click='update()'>update</button>"+
        "</div>";

$scope.edit = function(data) {
        var modalInstance = $uibModal.open({
            template:templateModal,
            controller: managementModal,
            resolve: {
                items: function() {
                    return data;
                }
            }
        });

        modalInstance.result.then(function(test){
            console.log(test); // the result is undefined
        });
    };

我的模态

var managementModal = function($scope, $http, $uibModalInstance, items){
    $scope.cancel = function(){
        $uibModalInstance.dismiss('cancel');
    };
    $scope.names = items;
    $scope.editable = items[0];
    console.log($scope.editable); // the result is undefined
    $scope.update = function(){
        $uibModalInstance.close();
    };
};

HTML

<tr ng-repeat="x in names">
    <td ng-model="id">{{x.id}}</td>
    <td>{{x.reg_date}}</td>
    <td><button id="{{x.id}}" ng-click="edit(x)">edit</button></td>
    <td>{{x.approval}}</td>
    <td>{{x.status}}</td>
    <td></td>
    <td>{{x.orderer}}</td>
    <td>{{x.creator}}</td>
    <td>{{x.production_type}}</td>
    <td>{{x.date}}</td>
    <td>N/A</td>
    <td><input type="checkbox" id="firstrequest_{{x.id}}"></td>
    <td>{{x.budget}}</td>
</tr>

Answer 1

首先在控制器中执行此操作（模态）

$uibModalInstance.close(); 到 $uibModalInstance.close($scope.editable);

然后将 $scope.editable = items[0]; 更改为 $scope.editable = items 因为您发送的是对象而不是项目中的数组。这是一个包含您的代码的 plnk example。

同时在您的 html td

中删除此内容

<td ng-model="id">{{x.id}}</td>

至

<td>{{x.id}}</td>

在模态 angular bootstrap 中获取编辑后的值

Get the edited value in modal angular bootstrap

angularjs

angular-ui-bootstrap