javascript - angular js中可选择的表格模式弹出窗口

Question

我正在尝试打开一个带有表格的模式弹出窗口。我怎样才能做到这一点？在我的 app.js 中，在行打开模式的单击事件中，我还想用所选项目值更新某些字段。但我无法使用选定的值进行更新。

my app.js
 var tableApp = angular.module('tableApp', ['ui.bootstrap']);


tableApp.controller('tableController', function ($scope,$rootScope, $filter, $modal) {
    $scope.filteredPeople = [];

    $scope.currentPage = 1;
    $scope.pageSize = 10;
    $scope.people = [{ id: "1", name: "joe",disable:true },
                 { id: "2", name: "bill", disable: true },
                 { id: "3", name: "john", disable: true },
    { id: "1", name: "joe", disable: true },
                 { id: "2", name: "bill", disable: true },
                 { id: "3", name: "john", disable: true },
    { id: "1", name: "joe", disable: true },
                 { id: "2", name: "bill", disable: true },
                 { id: "3", name: "john", disable: true },
    { id: "1", name: "joe", disable: true },
                 { id: "2", name: "bill", disable: true },
                 { id: "3", name: "john", disable: true },
    { id: "1", name: "joe" },
                 { id: "2", name: "bill", disable: true },
                 { id: "3", name: "john", disable: true }];



    $scope.getPage = function () {
        var begin = (($scope.currentPage - 1) * $scope.pageSize);
        var end = begin + $scope.pageSize;
        $scope.filteredPeople = $filter('filter')($scope.people, {
            id: $scope.idFilter,
            name: $scope.nameFilter

        });
        $scope.totalItems = $scope.filteredPeople.length;
        $scope.filteredPeople = $scope.filteredPeople.slice(begin, end);
    };
    $scope.getPage();

    $scope.pageChanged = function () {
        $scope.getPage();
    };
    $scope.open = function () {
        $scope.id = generateUUID();
    };
    $scope.dblclick = function (index) {
        for (var i = 0; i < $scope.filteredPeople.length; i++) {
            $scope.filteredPeople[i].disable = true;
        }
        return index.disable = false;
    }
    $scope.rowSelect = function (rowdata) {
        alert(rowdata.name);
    }


});
tableApp.controller('DetailModalController', [
'$scope', '$modalInstance', 'item',
function ($scope, $modalInstance, item) {

    $scope.item = item;

    $scope.dismiss = function () {
        $modalInstance.dismiss();
    };

    $scope.close = function () {                    
        $modalInstance.close($scope.item);                       
    };
}]);

tableApp.directive('myModal', function ($log, $compile) {
    var parm = [];
    return {
        restrict: 'E',
        templateUrl: 'modalBase.html',
        scope: {
            modal: '=',
            idF:'='
        },
        link: function (scope, element, attrs) {
            debugger;
            parm.name = attrs.idf;
        }
        //controller: function ($scope) {
        //    debugger;
        //    console.log($scope);
        //    $scope.selected = {
        //        item: $scope.modal.items[0]
        //    };

        //    $scope.ok = function () {
        //        debugger;
        //        alert(parm.name);
        //        $scope.modal.instance.close($scope.selected);

        //    };

        //    $scope.cancel = function () {
        //        $scope.modal.instance.dismiss('cancel');
        //    };

        //    $scope.modal.instance.result.then(function (selectedItem) {
        //        $scope.selected = selectedItem;
        //    }, function () {
        //        $log.info('Modal dismissed at: ' + new Date());
        //    });
        //}
    };
});

Answer 1

据我了解，您使用的是 angular.ui。我建议您使用 $modal 服务而不是 $modalInstance。使用它，您可以使用 $modal.open() 调用模态实例。而且你不需要在你的 Controller 中关闭它——在你的模态模板上放置适当的方法，它就会通过它的服务工作

模板:

<script type="text/ng-template" id="myModalContent.html">
    <div class="modal-header">
        <h3 class="modal-title">I'm a modal!</h3>
    </div>
    <div class="modal-body">
        <ul>
            <li ng-repeat="item in items">
                <a href="#" ng-click="$event.preventDefault(); selected.item = item">{{ item }}</a>
            </li>
        </ul>
        Selected: <b>{{ selected.item }}</b>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" type="button" ng-click="$close()">OK</button>
        <button class="btn btn-warning" type="button" ng-click="$dismiss('cancel')">Cancel</button>
    </div>
</script>

Controller

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

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

};

您可以在 angular.ui documentation 中找到更多相关信息对于模态