管理表单示例

管理表单示例

image

目录结构:

image

index.html:

    
    
    
    

    
    
    
    




    

        

        

            
序号
            
集群名称
            
创建者
            
创建时间
            
状态信息
            
查看详情
        
        

        

        

            
{{item.id}}
            
{{item.name}}
            
{{item.owner}}
            
{{item.date}}
            
{{item.state}}
            

                启动全部
                停止全部
                
            
        
        
    

index.js:

(function () {
    angular
        .module("app", [])
        .controller("ctrl", ["$scope", "$http", function ($scope, $http) {
            $scope.clusterGroups = [];
            $http.get("./clusterGroups.json").then(
                function (res) {
                    $scope.clusterGroups = res.data;
                },
                function (res) {
                    console.log(res);
                }
            )
        }])
        .directive("slideDown", function ($compile) {
            return {
                restrict: 'AE',
                replace: true,
                template: `展开集群`,
                link: function (scope, element, attributes, controller) {
                    let html = ``;

                    element.tog = false;
                    scope.showDetails = function () {
                        if (element.tog === false) {
                            $(element).children("button").text("折叠集群");
                            $(element).parent().parent().after($compile(html)(scope));
                            element.tog = true;
                        } else {
                            $(element).children("button").text("展开集群");
                            $(element).parent().parent().next().remove();
                            element.tog = false;
                        }
                    }
                }
            }
        })
        .directive("clusterDetails", ["$http", function ($http) {
            return {
                restrict: 'AE',
                replace: true,
                scope: {
                    itemId: "=itemId"
                },
                templateUrl: "./clusterDetails.html",
                link: function (scope, element, attributes, controller) {
                    scope.cluster = [];
                    $http.get("./cluster/cluster_" + scope.itemId + ".json").then(
                        function (res) {
                            scope.cluster = res.data;
                        },
                        function (res) {
                            console.log(res);
                        }
                    );
                }
            }
        }])
})();

clusterDetails.html:

    
        

            

            

                
序号
                
地址
                
端口
                
目录
                
状态
                
操作
            
            
            

            

                
{{item.id}}
                
{{item.ip}}
                
{{item.port}}
                
{{item.dir}}
                
{{item.state}}
                

                    启动
                    停止
                    命令