The function was triggered upon the form loading, instead of being activated when the button was clicked

The issue I am facing is that in the code snippet below, the function readCSV() is not being triggered when buttons for filepath1 and filepath2 are clicked. The function is only executed on form load. I was expecting it to work on button click as well.

I would appreciate any assistance with this matter.

Thank you!

<!DOCTYPE html>
<html ng-app="test" ng-controller="homePage">
... (original code snippet) ...

Script section

var test=angular.module("test",[]);
test.controller('submitController',function readCSV($scope, $http){
        var csv = "hello";//$scope.csvPath;
        $scope.filePath1;
        alert(csv);
});

Answer №1

The method in which you defined the controller is incorrect. It is unnecessary to include readCSV within the controller. Also, keep in mind that the controller is automatically initialized when the application loads.

If you want to invoke a function, follow this format:

var sample=angular.module("sample",[]);
sample.controller('submitController',function($scope, $http){
        $scope.readCSV=function(){
          //Perform actions here
        };
});

Answer №2

Give this a shot:

let example = angular.module("example", []);
example.controller('uploadController', function ($scope, $http) {
    $scope.loadFile = function () {
        let file = "world";//$scope.filePath;
        $scope.filePath2;
        alert(file);
    }
});

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

Display the div only if the content matches the text of the link

Looking for a way to filter posts on my blog by category and display them on the same page without navigating away. Essentially, I want users to click on a specific tag and have all posts with that tag show up. Since the CMS lacks this functionality, I pla ...

The webpage is missing a rendered React component even though it should be displayed

I am facing an issue where a React component is not appearing on the webpage despite being rendered. I have provided the code and screenshots of the components below for reference. Below is the snippet from the "App.jsx" file: function createCard ...

When the page loads, the HTML side menu will automatically scroll to the active item in a vertical

My website features a vertical side menu with approximately 20 items. The issue I am facing is that when a user clicks on an item, the destination loads but the side menu must be manually scrolled to find the active item if it's located at the bottom ...

Using interpolation with angular-translate to inject HTML into the page

Currently, I am exploring how to convert large chunks of HTML using angular-translate as a filter. I have language JSON files: { "PURPOSE": "Purpose Translated", "INTRO_VID": "Watch the Intro Video", "TOUR": "Join the Tour", "PURPOSE_COPY": "< ...

What is the best way to refresh a page after rotating the web page?

Struggling with a challenge in Next JS - can't seem to figure out how to automatically refresh the page when it rotates const app () => { useEffect(()=>{ window.addEventListener("orientationchange", function() { window.locati ...

determining the file size of images being loaded remotely by retrieving their image URLs

There is a straightforward regex function in jQuery that I'm using to automatically add an image tag to image URLs shared by users. This means that when a user posts something like www.example.com/image.jpg, the image tag will be included so that user ...

Issue with onDblClick event in Angular5 and PrimeNG's p-listbox

I encountered an issue while using p-listbox's onDblClick event as it does not return the selected list element. Instead, the event object only contains the value of 'this'. {"originalEvent":{"isTrusted":true}} HTML Blockquote <!-- S ...

altering the color of various spans consecutively

I am looking to create a text effect where each alphabet changes color in a wave-like pattern, starting from the left. I have assigned each alphabet a span with classes like span0, span1, and so on. To change the color, I used the following code: for (var ...

Sending multiple HTTP requests sequentially

I've been attempting to send a request object to a server repeatedly in a loop, aiming to execute the task 1000 times. The scenario is reminiscent of the movie Office Space, where a small sum is extracted from numerous bank accounts. Here's the ...

Generating dynamic dropdown menus using data from a database with the help of PHP and Ajax technologies

I'm currently working on creating a dynamic dropdown menu that will be populated with data retrieved from a database. I've hit a roadblock in parsing the data from a multidimensional array sent by a PHP file. Here's a snippet of my code: Se ...

What is the reason behind having to restart the npm server each time?

When first learning Reactjs with VSCode, there was no need to restart the server after making modifications. However, now I find that I must restart the server every time I make a change in order for those changes to be applied. ...

What is the best approach to managing a 204 status in Typescript in conjunction with the Fetch API

Struggling to handle a 204 status response in my post request using fetch and typescript. I've attempted to return a promise with a null value, but it's not working as expected. postRequest = async <T>(url: string, body: any): Promise ...

Displaying different elements using an anchor <a> tag

Within this example, I've created two functional components that mimic separate pages with differently colored <div> boxes. const Home = () => <div style={{background:'red', height: 100, width: 100}}></div>; const ...

The dataset remains undefined within the context of Vue.js

I am attempting to utilize the dataset property in Vue to retrieve the data-attribute of an element. Here is how I am implementing it: <ul id="filter"> <li><a class="filter-item" v-on:click="filterItems" data-letter="a" href="#"> ...

Steps to insert a personalized attribute into a TypeScript interface

UPDATED EXPLANATION: I'm fairly new to TypeScript, so please bear with me if this question seems basic. I'm working with an existing library (ngx-logger) that I don't want to or can't modify. My goal is to create a service that generat ...

Complete and automatically submit a form in a view using AngularJS

I have developed a basic AngularJS application that is functioning smoothly. Currently, I am looking to populate certain fields and submit the form directly from the view without requiring any user input. Below, you'll find some simplified JavaScrip ...

Is it possible to access dl, dt, or dd tags based on their roles within the testing library?

Is there a way to use the testing library to specifically target the dd tag based on its role? <dl> <dt>ID</dt> <dd>123456</dd> </dl> I attempted: screen.getByRole('term', { name: 'ID' }) as wel ...

What advantages does using `prestart` offer compared to `&&` in a command within `package.json`?

I believe the title speaks for itself, but let's dive in: What advantages does using the pre-script of npm package.json, like prestart, have over simply combining commands with && in the start script? { prestart: "parcel build", start "n ...

Maximizing the potential of .delegate in combination with .closest

$('.inputRadio').parent().click(function (e) { //implement delegate method here }); Looking for assistance on how to integrate the delegate method in the provided function. Any suggestions? ...

Set values for scope variables that are created dynamically

I am currently working on a solution to toggle dynamically generated rows of data. I have attempted using ng-init and passing it to a function, but I seem to be making a mistake somewhere and struggling to understand if this is even feasible. The issue see ...