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

selectable table modal popup in angular js

本文关键字：模式 窗口 表格 js angular      更新时间：2023-09-26

我正在尝试打开一个带有表格的模式弹出窗口。我该怎么做？在我的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());
        //    });
        //}
    };
});

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

模板：

<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>

控制器

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文档中找到更多信息

相关文章：