Issue with function not getting triggered upon ng-click event binding

Having trouble getting a button to call the getFilteredRows() function in my MVC app's view and controller. I've tried various combinations, but the button just won't trigger the function. Can anyone help me figure out why?

@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: [
                    // Columns definition goes here...
                ],
                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

The modification required is,

<span ng-click="controller.refreshData()">

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

CKeditor with Kcfinder

Although I've seen similar topics, none seem to match my exact situation. I recently added CKEditor to my website and wanted to integrate KCFinder as the file manager. Following the instructions on KCFinder's website, I copied the necessary file ...

Unable to locate element using Protractor

I'm struggling with getting protractor to work correctly when testing my angular app. The code in my spec file is as follows: describe('app login', function() { it('should allow admin user to log in', function() { browse ...

Using Mongoose schema with a reference to an undefined 'ObjectID' data type

I am currently working on establishing relationships between my schemas, and I have encountered some issues with my solution. Here is how my device schema looks like: var deviceSchema = schema({ name : String, type : String, room: {type: mongo ...

Error occurs when running Visual Studio Code locally - variable not defined

After successfully going through a Microsoft online demo on setting up an httpTrigger in Visual Studio Code with JavaScript to upload it to Azure Functions, I decided to customize the code for a specific calculation. I managed to get the calculation done a ...

What is the default method to activate textAngular automatically?

When using textAngular, it remains inactive when the page first loads and only becomes active once the user clicks on the input field. This means that all buttons, such as "Insert video," will be disabled until the text input is focused. Is there a method ...

Hover state remains persistent even after modal window is activated in outouchend

One of the buttons on my website has a hover effect that changes its opacity. This button is used to share information on Facebook. It's a simple feature to implement. Here is the CSS code: .social_vk, .social_fb { height: 38px; obj ...

Triangle shape with transparent background on top of iframe or div

Currently facing an issue where I need to add an iframe containing maps to my page. However, I also need one (or two) triangles placed over this iframe with a transparent background. I attempted this solution, but unfortunately, it did not work as expect ...

Prevent regex special characters in JavaScript while preserving the original string for keyword matching

As I develop my web page, I encountered an issue while trying to highlight text based on user input in the search box. My search algorithm matches each space-separated keyword, but ran into problems when including brackets in the search term. This caused a ...

What are the best practices for integrating QML with Java?

How can QML be interfaced with Java when developing the GUI and API for a linux based device? ...

Populate Vue 3 Element-plus Virtualized Table with actual data

As a newcomer to frontend development, I am currently working on integrating Element-plus Virtualized Table with actual data. Here is the basic structure of the example: const generateColumns = (length = 10, prefix = 'column-', props?: any) => ...

The default value is not displayed in the Angular dropdown menu

When using regular html select menus, if you create an option element with selected and disabled attributes and provide text for that option, the text will be displayed by default in the select menu. Below is a basic example of HTML code: <select name= ...

Verify modifications prior to navigating in React or Next.js

I have a simple Next JS application with two pages. -> Home page import Header from "../components/header"; const handleForm = () => { console.log("trigger"); }; export default () => ( <> <Header /> & ...

guide on updating JQuery string with JavaScript to incorporate new parameters

Similar Question: How to replace only one parameter or fast with Jquery on Jquery String The website has a query string as follows: http://www.nonloso.html/?nome1=pollo&cognome1=chicken&nome2=a&cognome2=b&nome3=c&cognome3=d This ...

Is there a way to retrieve the textFrame where the cursor is currently located?

While inputting text into a frame, I am looking to execute a script. I want this script to target the specific text frame where my cursor is located. How can I reference this particular textFrame using Javascript? ...

Using the .load() function to import an HTML file from the directory above

I am trying to achieve the following structure: folder1 index folder2 page to load Can I dynamically load the 'page to load' in a div within the 'index' page using DIV.load()? I have attempted various paths (../folder2/page, ./, ...

Guide on creating a conditional column in a kendo UI grid with the use of AngularJS

Is there a way to dynamically add a column to the Kendo UI grid based on JSON data? Consider the following JSON input: [{ "ProductID": 1, "ProductName": "Chai", "Supplier": { "SupplierID": 1, "SupplierName": "Exotic Liquid ...

Displaying a Vuetify stepper alert if required fields are left blank

I received assistance with developing this Vuetify stepper code, but I have one final inquiry. I have learned that there are specific rules that can be implemented to require certain blanks to be filled out. For example, in my code, if the blanks in step 3 ...

Callback is triggered after ng-if removes the directive from the scope

A scenario on my page involves an angular directive nested within ng-if. I've developed a service that features a function, let's name it functionX, capable of accepting a callback as an argument. Whenever the ng-if condition becomes true, the ...

Does the sequence matter when studying JavaScript, Ajax, jQuery, and JSON?

Expanding my job opportunities is a top priority for me, which is why I am dedicated to learning JavaScript, AJAX, jQuery, and JSON. As I delve into these languages, I can see how they all have roots in JavaScript. My main inquiry is about the relationsh ...

Issue with Vue v-for not updating data model variable

I am attempting to render a page with dynamic properties using the following code: <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="root"> <div v-for="current in 2&quo ...