Creating Angular Modal on ng-click

Question

Creating Angular Modal on ng-click

I'm facing a challenge with a seemingly simple task.

Within an ng-repeat, I have a table of events. My goal is to enable users to click on the event name and view detailed information in a modal window.

To achieve this, I have set up an

ng-click="eventDetails(objectId)"

function linked to the event title. In my controller, the code looks like this:

app.controller('viewEventRequestsController', function($scope, EventFactory){

// Fetching a list of events, each containing an objectId property
        EventFactory.query(function(response){
            $scope.events = response.results;
        });

// Function triggered when clicking an event name            
           $scope.eventDetails = function(objectId){
            $scope.modalOn = true;
             $scope.modal = EventFactory.get({ objectId: objectId });

             console.log($scope.modal)

        }

    });

This snippet demonstrates part of my markup:

<tr ng-repeat="items in events | filter:filter | orderBy:sort:reverse">
        <td>
            <a ng-click="eventDetails(objectId)">{{items.Name}}</a>
        </td>

However, the issue arises as console.log($scope.modal); returns the entire array of objects instead of just the selected one.

In another section of my application, using

$scope.events = EventFactory.get({ objectId: $routeParams.objectId });

works correctly. Unfortunately, this approach doesn't fit my current needs since I must display event details in a modal instead of redirecting to a separate page. Therefore, I cannot employ $routeParams this time.

Are there any suggestions on how to overcome this obstacle?

javascript angularjs

Answer 1

Answer №1

It seems there may be a mistake in your post, but just to clarify, if your code is as shown, you are passing an object that does not exist into the eventDetails function here:

    <a ng-click="eventDetails(objectId)">

What you should actually pass is:

    <a ng-click="eventDetails(items.itemId /*or whatever the id field is */)">

This is because you are iterating through the events array and assigning each element's value to the items variable here:

    ng-repeat="items in events | filter:filter | orderBy:sort:reverse"

If this is not a typo, then it appears that all Events are being retrieved without applying any filters, similar to calling get() with no filters.

--- UPDATE ---

As you have the Events locally, you can retrieve an individual event without making another server request.

Try updating your eventDetails() function like this:

    $scope.eventDetails = function(event){

       $scope.modalOn = true;
       var index = $scope.events.indexOf(event);
       if(index > -1){
         $scope.modal = $scope.events[index];
       }
    }

In your HTML, simply pass the entire item as an argument to the function:

    <tr ng-repeat="items in events | filter:filter | orderBy:sort:reverse">
    <td>
        <a ng-click="eventDetails(items)">{{items.Name}}</a>
    </td>

Answer 2

It seems there may be a mistake in your post, but just to clarify, if your code is as shown, you are passing an object that does not exist into the eventDetails function here:

    <a ng-click="eventDetails(objectId)">

What you should actually pass is:

    <a ng-click="eventDetails(items.itemId /*or whatever the id field is */)">

This is because you are iterating through the events array and assigning each element's value to the items variable here:

    ng-repeat="items in events | filter:filter | orderBy:sort:reverse"

If this is not a typo, then it appears that all Events are being retrieved without applying any filters, similar to calling get() with no filters.

--- UPDATE ---

As you have the Events locally, you can retrieve an individual event without making another server request.

Try updating your eventDetails() function like this:

    $scope.eventDetails = function(event){

       $scope.modalOn = true;
       var index = $scope.events.indexOf(event);
       if(index > -1){
         $scope.modal = $scope.events[index];
       }
    }

In your HTML, simply pass the entire item as an argument to the function:

    <tr ng-repeat="items in events | filter:filter | orderBy:sort:reverse">
    <td>
        <a ng-click="eventDetails(items)">{{items.Name}}</a>
    </td>

Creating Angular Modal on ng-click

Answer №1

Similar questions

Unlock the power of TypeScript's inheritance by utilizing static methods for type

What methods can I utilize to prevent pop-up errors from appearing in my javascript code?

How to properly utilize $.ajaxComplete and $.ajaxError functions?

Guide to retrieving the previous URL in Angular 2 using Observables

Using Javascript to prevent css from changing the display

Take action upon window.open

To dismiss a popup on a map, simply click on any area outside the map

"Exploring the process of integrating a controller into an external HTML file using AngularJS

What sets npm install apart from manual installation?

Issue: Configuration Error - CKEditor5 cannot be loaded for extension in Vuejs

Tips for including a JWT token as a query parameter in NEXT js?

Is there a way to remove a checkbox node that has already been generated?

Sending a PHP variable to a modal using jQuery Ajax

CSS media query to target specific viewport width

Every variable that has been stored in the local storage

Execute the script before the Vue.js framework initiates the HTML rendering

What could be causing my jQuery to only toggle the first arrow in my HTML?

Encountering null values in IE8/IE7 JavaScript code

Tips for triggering a JavaScript function within WordPress using an inline function call

Utilizing Google Analytics within an Angular Single Page Application