How can I implement $compile to execute a function on every row using angularjs and razor?

UPDATE: It seems that there is some confusion here, I am looking to apply the function to all rows, without using '', "", '"...

After conducting some research, I have discovered that I will need to utilize $compile, but I am unsure of how to implement it in this scenario. Can someone please assist me?

I'm encountering difficulty passing parameters on the second to the last page of a datatable.

All rows should contain a button that triggers a function to open a modal and display all fields, however, only the first page seems to be functioning properly.

Using razor to display table values and send parameters, upon inspecting the other pages I notice that all buttons have the correct value, but they are not triggering the function "GetData()" on those pages.

Below is the code snippet:

<div ng-app="testApp" ng-controller="testController">
<table id="customTable" class="table table-responsive table-hover table-striped table-bordered custom-Datatable" style="font-family:'Segoe UI'; width:100%;">
    <thead>
        <tr class="bg-primary text-center" style="color:white">
            <th>Status</th>
            <th>AuthorizationNumber</th>
            <th>Remarks</th>
            <th>Client</th>
            <th>MerchantName</th>
            <th>Option</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr style="font-family:'Segoe UI'" class="text-center">
                <td>
                    @Html.DisplayFor(model => item.Status)
                </td>
                <td>
                    @Html.DisplayFor(model => item.AuthorizationNumber)
                </td>
                <td>
                    @Html.DisplayFor(model => item.Remarks)
                </td>
                <td>
                    @Html.DisplayFor(model => item.ClientName)
                </td>
                <td>
                    @Html.DisplayFor(model => item.MerchantName)
                </td>
                <td>
                    <input type="button" value="See More"
                           ng-click="GetData('@item.Id')"
                           class="btn btn-outline-primary" />
                </td>
            </tr>
        }

    </tbody>
</table>
</div>

This is my JavaScript code:

var app = angular.module('testApp', []);
app.controller('testController', function ($scope, $http) {

    $scope.GetData = function (id) {
        $http.post('/WexReportInfoes/GetTransaction', { InfoId: id })
          .then(function (result) {
            debugger;
            if (result.data.error == null) {
                $scope.object = result.data;
                $('#modalInfo').modal('show');
            }
            else {
                alert('error')
            }
            
        })
    }   
})

Has anyone encountered this issue before and can offer guidance?

Answer №1

I believe it is unnecessary:

RetrieveData('@item.Id')

Simply utilize:

RetrieveData(@item.Id)

Answer №2

<input type="button" value="Show Additional Content"
                           ng-click="RetrieveData("@item.Id")"
                           class="btn btn-outline-primary" />

apply ng-click="RetrieveData("@item.id")"

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

Transferring Information Across Javascript Documents

I am facing a dilemma with using JSON data generated by one script in another script. I am unsure where to begin and have considered saving the JSON string to a text file for the second script to use, but this feels like a workaround rather than a proper s ...

What is the best way to ensure that a navbar dropdown appears above all other elements on

I'm having trouble creating a navbar dropdown with material design. The dropdown is working fine, but the issue I'm facing is that other elements are floating above it. https://i.stack.imgur.com/aJ0BH.png What I want is for the dropdown to floa ...

Error: Unable to encode data into JSON format encountered while using Firebase serverless functions

I am currently working on deploying an API for my application. However, when using the following code snippet, I encountered an unhandled error stating "Error: Data cannot be encoded in JSON." const functions = require("firebase-functions"); const axios = ...

What is the difference between achieving a mirror effect and a steel effect using Three.js?

When using three.js, I find myself a little confused about the concepts of metalness and roughness. Can someone explain the differences between metalness and roughness when applied to materials like mirrors and metals/steel? And furthermore, how can these ...

How can I pass a PHP variable to a JavaScript variable using PHP and JQuery/JavaScript?

I am facing a challenge with a large <select> input that is used across multiple pages. My idea is to separate this dropdown box into its own PHP file and load it externally using JQuery. Is this approach feasible? Here's an outline of what I ha ...

Can you show me the way to open a single card?

Can someone assist me in making it so only one card opens when clicked, rather than all of them opening at once? Additionally, if there is already an open card and I click on another one, the currently open card should close automatically. If you have any ...

Are we on the correct path for breaking down code using react JS?

As I work on creating reusable table components, each column comes with its own set of functionalities, which results in dealing with numerous components. To streamline the process, I have been separating every component piece into individual files and ex ...

file uploaded with missing extension

Currently, my code looks like this: var multipart = require('connect-multiparty'); var multipartMiddleware = multipart(); router.post('/registo',upload.single('file'), function (req, res) { However, the file extension for t ...

While Advanced REST Client successfully retrieves an infinite JSON file from the AngularJS REST service, Postman encounters an error with the code ERR_INCOMPLETE_CHUNKED_ENCODING

I've encountered a peculiar issue. When making a REST call in Angular (using an app built with Ionic v1) to a Java endpoint, something goes awry and Chrome throws the following error: https://i.sstatic.net/1sxp7.png The code of interest is this Angul ...

Partially accessible Angular service within a callback function

I'm currently facing an issue in my Angular simple app related to a factory that is not fully available within a callback function. You can check out a simplified version of the application on this Plunkr link. Here's a snippet of the code: Th ...

problem with the visibility of elements in my HTML CSS project

How do I prevent background images from showing when hovering over squares to reveal visible images using CSS? h1 { text-align: center; } .floating-box { float: left; border: 1px solid black; width: 300px; height: 300px; margin: 0px; } div ...

Error Encountered: Angular - Despite successful $http.delete request, the operation does not actually take

I am currently facing an issue with deleting a customer in my Angular + PHP application. Although the application returns success without any errors, it fails to delete the customer from the database. Here is the code snippet of my Angular controller: ...

Is it possible to apply search filters within a child component in Angular?

I have a situation where I am passing data from a parent component to a child component using *ngFor / @input. The child component is created multiple times based on the number of objects in the pciData array. pciData consists of around 700 data objects, ...

Encountering difficulties in storing array data into MongoDB collection

I am facing an issue with connecting to two different MongoDB instances using different URLs. One URL points to a remote connection string while the other one is for a local MongoDB instance. Initially, I establish a connection to MongoDB using MongoClient ...

A guide to injecting HTML banner code with pure Vanilla Javascript

Looking for a solution to incorporate banner code dynamically into an existing block of HTML on a static page without altering the original code? <div class="wrapper"><img class="lazyload" src="/img/foo01.jpg"></div> <div class="wrapp ...

What is the best way to assign a value to the param tag of an applet using JavaScript variables

This is my external javaScript file named myJs.js function search(){ var hint = document.getElementById("sChoice").value; var item = document.getElementById("sKey").value; document.getElementById("c").value=hint; document.getElementById ...

enigmatic issue arising in Angular/Node

Could someone please shed some light on what might be causing the issue in my code? Thank you in advance! webpack: Compilation Failed. My Angular CLI: 1.6.3 Node: 8.9.4 OS: Windows 32-bit Angular: 5.2.1 Error Message: ERROR in ./node_modules/css-loader ...

A quick guide on automatically populating text boxes with characteristics of the item chosen from a drop-down menu

On my webpage, I am looking to automatically populate textboxes with information (such as common name, location, etc.) of the selected shop from a dropdown list without having to refresh the page. Here is the dropdown list: <select id="shops" class="f ...

Something is not quite right when the page is loading in a Ruby on Rails application

In the process of developing a wiki clone, I am faced with an issue involving JavaScript. When I navigate to a specific page by clicking on a link, the JavaScript does not function properly until I refresh the page. The JavaScript aspect mainly involves an ...

Exploring the power of the spread operator in event listeners within VueJS 2 and JSX

Let me simplify my issue for you: render (h) { let events = {onClick: handleClick} return (<div {...events}></div>) } The onClick event did not get added to the div element. The spread operator works well with class and style attributes b ...