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

Understanding conditional statements in JavaScript can greatly enhance your programming skills

I encountered a "TypeError: Unable to access property 'name' of undefined" error when attempting to export a redux reducer

Applying Angular to Add a CSS Class

What is the best way to dynamically configure an animation with ng-view in AngularJS?

Emphasize a checkbox by selecting it when another checkbox is checked

Ways to extract specific data from a Json response

Updating Mapped Components with Selected State

"Transferring a variable from the parent Layout component to its children components in Next

Creating a CSS grid layout with a scrollbar positioned on the left side and content filling from left to right

Ways for enabling the user to choose the layout option

Creating a bar graph using data from a JSON file in AngularJS with Highcharts

Having trouble formatting an AJAX POST request properly

Creating a Custom Hot Module Replacement Hook for Vue.js and Webpack

Tips for positioning a chat box at the bottom of a v-card's visible area

Mastering form reset functionality using jquery

What is the best way to access the display property of a DOM element?

Retrieving information from a JSON object in Angular using a specific key

How to set a timeout for a socket.io connection in a node.js application

Why does my Redux callback keep getting invoked multiple times?

Messages are not being received despite no errors occurring in the PHP form