AngularJS - 将按钮的位置移动到列标题下

Question

我的按钮位置的问题认为它是直接的，但一直放错地方。我希望它在这里，但是如图所示，似乎并非如此。

我目前在网上看，但似乎找不到相关的，虽然也许我看起来不够努力。

AngularJS：

app.controller('ClientsDetailsEditCtrl', function ($scope, $log, $uibModalInstance, $http, SpringDataRestService, row, onComplete) {
    $scope.alerts = [];
    $scope.onComplete = onComplete;

    // If row is provided, gather up existing data entry for binding
    if (row) {
        SpringDataRestService.get(
            {
                "resource": "clientsInternal",
                "id": row
            },
            function (response) {                   // Success Function - we have a copy of this client
                // Transform URIs into IDs etc for rendering
                if (response.type === "SUBSCRIBER") {
                    $http({
                        method: 'GET',
                        url: response._links.vendorClient.href
                    }).then(function successCallback(response) {
                        // this callback will be called asynchronously
                        // when the response is available
                        $scope.targetEntity.vendorClient = response.data.id;
                    });
                } else {
                    // Find any clients which depend on this one and disable delete if necessary
                    SpringDataRestService.get(
                        {
                            "vendorClientId": row,
                            "collection": "clientsInternal",
                            "resource": "search",
                            "method": "findActiveClientsByVendorClientId"
                        },
                        function (response) {                   // Success Function
                            if (response._embedded.clientsInternal.length) {
                                $scope.disableDeletionReason = "Cannot delete - " + response._embedded.clients.length + " active client(s) depend on this one."
                            }
                        }
                    );
                }
                $scope.targetEntity = response;
            },
            function (response) {                   // Failure Function
                clearDentAlerts($scope.alerts);
                reportDentAlert($scope.alerts, new DentAlert(AlertType.ERROR, generateAlertMessage(response)));
            }
        );

        $scope.isNew = false;
    } else {
        $scope.isNew = true;
        $scope.targetEntity = {};
    }

    /*$scope.contactTypeList = [{
        'id': 1, 'name': 'Reporting'
    }, {
        'id': 2, 'name': 'Primary Reporting'
    }, {
        'id': 3, 'name': 'Distribution List'
    }, {
        'id': 4, 'name': 'Location'
    }, {
        'id': 5, 'name': 'Billing'
    }];
    $scope.targetEntity.contactType = $scope.contactTypeList[0].name;*/

    // Get list of clients for pulldown menu
    $scope.vendorClientList = [];
    SpringDataRestService.get(
        {"collection": "clientsInternal"},
        function (response) {                   // Success Function
            var clients = response._embedded.clientsInternal;
            for (var i = 0, len = clients.length; i < len; i++) {
                if (clients[i].type === "VENDOR") {
                    var newClient = {id: clients[i].id, name: clients[i].name};
                    $scope.vendorClientList.push(newClient);
                }
            }
        },
        function (response) {                   // Failure Function
            clearDentAlerts($scope.alerts);
            reportDentAlert($scope.alerts, new DentAlert(AlertType.ERROR, generateAlertMessage(response)));
        }
    );

    // Handle event changes in the form to make it more idiot-proof
    $scope.handleTypeChange = function (newType) {
        // Type has changed - blank values where necessary
        if (newType === "VENDOR") {
            // Blank the vendor client pull down menu - no longer relevant
            $scope.targetEntity.client = "";
        }
    };

    // Handle create button event
    $scope.handleCreate = function () {
        // Got a new or updated object - now try persisting it
        if ($scope.targetEntity.vendorClient) {
            $scope.targetEntity.vendorClient = getResourceUri("clientsInternal", $scope.targetEntity.vendorClient);
        } else {
            $scope.targetEntity.vendorClient = null;
        }
        SpringDataRestService.save(
            {"collection": "clientsInternal"},
            $scope.targetEntity,
            function (response) {                   // Success Function
                $scope.onComplete();
                $uibModalInstance.close();
            },
            function (response) {
                clearDentAlerts($scope.alerts);
                reportDentAlert($scope.alerts, new DentAlert(AlertType.ERROR, generateAlertMessage(response)));
            }
        );
    };

    // Handle update button event
    $scope.handleUpdate = function () {
        if ($scope.targetEntity.vendorClient) {
            $scope.targetEntity.vendorClient = getResourceUri("clientsInternal", $scope.targetEntity.vendorClient);
        } else {
            $scope.targetEntity.vendorClient = null;
        }
        SpringDataRestService.update(
            {
                "collection": "clientsInternal",
                "id": $scope.targetEntity.id
            },
            $scope.targetEntity,
            function (response) {                   // Success Function
                $scope.onComplete();
                $uibModalInstance.close();
            },
            function (response) {
                clearDentAlerts($scope.alerts);
                reportDentAlert($scope.alerts, new DentAlert(AlertType.ERROR, generateAlertMessage(response)));
            }
        );
    };

    // Handle delete button event
    $scope.handleDelete = function () {
        SpringDataRestService.delete(
            {
                "resource": "clientsInternal",
                "id": $scope.targetEntity.id
            },
            function (response) {                   // Success Function
                $scope.onComplete();
                $uibModalInstance.close();
            },
            function (response) {                   // Failure Function
                clearDentAlerts($scope.alerts);
                reportDentAlert($scope.alerts, new DentAlert(AlertType.ERROR, generateAlertMessage(response)));
            }
        );
    };

    // Handle cancel button event
    $scope.handleCancel = function () {
        $uibModalInstance.dismiss('cancel');
    };

});

HTML：

<div class="widget-body">
                <table ng-table="clientTableOptions"
                       class="table table-bordered table-striped margin-bottom-10">
                    <tr ng-repeat="entity in $data" ng-click="onRowSelect(entity)">
                        <td data-title="'Name'" sortable="'name'" filter="{ name: 'text'}">
                            {{entity.name}}
                        </td>
                        <td data-title="'Type'" sortable="'type'" filter="{ type: 'text'}">
                            <div style="width:100px">
                                {{entity.type}}
                            </div>
                        </td>
                        <td data-title="'First Line of Address'" sortable="'address1'" filter="{ address1: 'text'}">
                            {{entity.address1}}
                        </td>
                        <td data-title="'City'" sortable="'city'" filter="{ city: 'text'}">
                            {{entity.city}}
                        </td>
                        <td data-title="'State / Province'" sortable="'stateProvince'"
                            filter="{ stateProvince: 'text'}">
                            {{entity.stateProvince}}
                        </td>
                        <td data-title="'Country'" sortable="'country'" filter="{ country: 'text'}">
                            {{entity.country}}
                        </td>
                        <td data-title="'Status'">
                            <span ng-bind-html="renderCrudEntityState(entity)"></span>
                        </td>
                        <td data-title="'Action'" href type="button" class="btn btn-sm shiny" ng-click="openModal()">Create New Client>
                            <a ng-click="openModal(entity.id)" class="btn btn-default btn-xs purple">
                                <i class="fa fa-edit"></i>Modify
                            </a>
                        </td>
                    </tr>
                </table>
            </div>

按钮代码：

        <a href type="button" class="btn btn-sm shiny" ng-click="openModal()">Create New Client</a>

提前致谢

Answer 1

您试图将按钮放在过滤器行中，为此，您必须定义自定义过滤器模板并将其传递给动作列的td。

我使用您的代码制作了一个示例解决方案，您可以查看它here

代码：html：

    <div ng-app="myApp" class="container-fluid">

  <script type="text/ng-template" id="path/to/your/filters/actions.html">
   <a href type="button" class="btn btn-sm shiny" ng-click="openModal()">Create New Client</a>
  </script>

  <div class="widget-body">
                <table ng-table="clientTableOptions"
                       class="table table-bordered table-striped margin-bottom-10">
                    <tr ng-repeat="entity in $data" ng-click="onRowSelect(entity)">
                        <td data-title="'Name'" sortable="'name'" filter="{ name: 'text'}">
                            {{entity.name}}
                        </td>
                        <td data-title="'Type'" sortable="'type'" filter="{ type: 'text'}">
                            <div style="width:100px">
                                {{entity.type}}
                            </div>
                        </td>
                        <td data-title="'First Line of Address'" sortable="'address1'" filter="{ address1: 'text'}">
                            {{entity.address1}}
                        </td>
                        <td data-title="'City'" sortable="'city'" filter="{ city: 'text'}">
                            {{entity.city}}
                        </td>
                        <td data-title="'State / Province'" sortable="'stateProvince'"
                            filter="{ stateProvince: 'text'}">
                            {{entity.stateProvince}}
                        </td>
                        <td data-title="'Country'" sortable="'country'" filter="{ country: 'text'}">
                            {{entity.country}}
                        </td>
                        <td data-title="'Status'">
                            <span ng-bind-html="renderCrudEntityState(entity)"></span>
                        </td>
                        <td data-title="'Action'" filter="{ action: 'actions'}"
                            href type="button" class="btn btn-sm shiny" ng-click="openModal()">Create New Client>
                            <a ng-click="openModal(entity.id)" class="btn btn-default btn-xs purple">
                                <i class="fa fa-edit"></i>Modify
                            </a>
                        </td>
                    </tr>
                </table>
            </div>

</div>

JS：

(function() {
  angular.module("myApp", ["ngTable", "ngTableDemos", "angularMask"]);

  angular.module("myApp").config(setConfigPhaseSettings);

  setConfigPhaseSettings.$inject = ["ngTableFilterConfigProvider"];

  function setConfigPhaseSettings(ngTableFilterConfigProvider) {
    var filterAliasUrls = {
      actions: "path/to/your/filters/actions.html"
    };
    ngTableFilterConfigProvider.setConfig({
      aliasUrls: filterAliasUrls
    });

    // optionally set a default url to resolve alias names that have not been explicitly registered
    // if you don't set one, then 'ng-table/filters/' will be used by default
    ngTableFilterConfigProvider.setConfig({
      defaultBaseUrl: "ng-table/filters/"
    });
  }
})();

(function() {
  "use strict";

  angular.module("myApp").controller("demoController", demoController);

  demoController.$inject = [
    "NgTableParams",
    "ngTableSimpleMediumList",
    "ngTableDemoCountries"
  ];

  function demoController(NgTableParams, simpleList, countries) {


  }


})();

有关详细信息，请参阅此link上的文档