在 ng-click 调用上设置时未调用函数

Question

我的 mvc 应用程序中有以下视图和控制器。我有一个按钮 ("Get Filtered Rows")，我想在控制器中调用 getFilteredRows() 函数。我已经尝试了多种组合来获得调用该函数的按钮，但我似乎无法获得调用它的按钮。我不明白为什么按钮没有调用该函数。有帮助吗？

@using ProjectExplorer.Web.Helpers
@model ProjectExplorer.Web.ViewModels.IProjectHeaderViewModel

@{
    var projects = Model.ProjectHeaders;
}

<div>
    <div class="projectlist" ng-controller="MatchingProjectsController as vm"
         ng-init='vm.init(@Html.JsonFor(projects))'>
        <h3>Matching Projects</h3>
        @Html.ActionLink("Export to Excel", "ExcelExport")
        <button ng-click="getFilteredRows()">Get Filtered Rows</button>
        <div id="projectsGrid" ui-grid="vm.projectsTableData" ui-grid-resize-columns ui-grid-selection class="grid gridlist"></div>
    </div>
</div>


(function () {
    "use strict";
    window.app.controller("MatchingProjectsController", MatchingProjectsController);
    function MatchingProjectsController(uiGridConstants) {
        var vm = this;
        vm.init = init;
        function init(projects) {
            vm.projects = projects;
            vm.projectsTableData = _.map(projects, _.partialRight(_.pick, "projectId", "projectServiceNumber", "location", "name", "country", "completionYear", "totalAreaSquareFeet", "totalAreaSquareMeters", "constructionCost", "constructionStatusName", "hasImagery"));
            vm.projectsTableData = {
                enableColumnSorting: true,
                enableFiltering: true,
                enableVerticalScrollbar: false,
                columnDefs: [
                    {
                        field: "projectServiceNumber", name: "Number", width: "6%",
                        cellTemplate: "<div class='text-center ui-grid-cell-contents'>" +
                            "<a href=Details/{{row.entity.projectId}}>{{COL_FIELD}}</a>" +
                            "</div>" },
                    {
                        field: "name", width: "27%",
                        cellTemplate: "<div class='ui-grid-cell-contents'>" +
                            "<a href=Details/{{row.entity.projectId}}>{{COL_FIELD}}</a>" +
                            "</div>"
                    },
                    { field: "location", width: "12%" },
                    { field: "country", width: "8%" },
                    {
                        field: "completionYear", filters: [
                            {
                                condition: uiGridConstants.filter.GREATER_THAN_OR_EQUAL,
                                placeholder: "after"
                            },
                            {
                                condition: uiGridConstants.filter.LESS_THAN_OR_EQUAL,
                                placeholder: "before"
                            }
                        ], name: "Construction Year", width: "8%" },
                    {
                        field: "totalAreaSquareFeet", filters: [
                            {
                                condition: uiGridConstants.filter.GREATER_THAN_OR_EQUAL,
                                placeholder: "greater than"
                            },
                            {
                                condition: uiGridConstants.filter.LESS_THAN_OR_EQUAL,
                                placeholder: "less than"
                            }
                        ], name: "Square Feet", width: "8%", cellTemplate: '<div class="text-center ui-grid-cell-contents">{{ COL_FIELD | number:0 | hide_zero }}</div>' },
                    {
                        field: "totalAreaSquareMeters", filters: [
                            {
                                condition: uiGridConstants.filter.GREATER_THAN_OR_EQUAL,
                                placeholder: "greater than"
                            },
                            {
                                condition: uiGridConstants.filter.LESS_THAN_OR_EQUAL,
                                placeholder: "less than"
                            }
                        ], name: "Square Meters", width: "8%", cellTemplate: '<div class="text-center ui-grid-cell-contents">{{ COL_FIELD | hide_zero | number:0 }}</div>' },
                    {
                        field: "constructionCost", filters: [
                            {
                                condition: uiGridConstants.filter.GREATER_THAN_OR_EQUAL,
                                placeholder: "greater than"
                            },
                            {
                                condition: uiGridConstants.filter.LESS_THAN_OR_EQUAL,
                                placeholder: "less than"
                            }
                        ], displayName: "Cost (USD)", width: "8%", cellTemplate: '<div class="text-center ui-grid-cell-contents">{{ COL_FIELD | hide_zero | currency:undefined:0 }}</div>' },
                    { field: "constructionStatusName", width: "8%", name: "Construction Status" },
                    {
                        field: 'hasImagery',
                        name: "Imagery",
                        width: '6%',
                        enableFiltering: false,
                        cellTemplate: '<div ng-show="COL_FIELD" class="text-center ui-grid-cell-contents"><span class="glyphicon glyphicon-ok"></span></div>' }
                ],
                enableColumnMenus: false,
                exporterMenuPdf: false,
                data: vm.projectsTableData,
                onRegisterApi: function (gridApi) {
                    vm.gridApi = gridApi;
                }
            };
        }
        vm.filteredRows = [];
        vm.getFilteredRows = function () {
            var _renderedRows = vm.gridApi.grid.renderContainers.body.renderedRows;
            vm.filteredRows = vm.gridApi.core.getVisibleRows(vm.gridApi.grid);
        };
    }
})();
//# sourceMappingURL=MatchingProjectsController.js.map

Answer 1

应该改为，

<button ng-click="vm.getFilteredRows()">

在 ng-click 调用上设置时未调用函数

function not being called when set up on a ng-click call

javascript

button

angularjs

ng-controller