Utilizing ng-repeat, ng-grid, and ng-click in Angular: A comprehensive guide

I'm encountering an issue with populating a table using ng-repeat after a cellTemplate ng-click.

 
        cellTemplate: '<div  ng-click="foo()" ng-bind="row.getProperty(col.field)"></div>'
    

Within this foo method, I am trying to pass results to the HTML page.


        $scope.results = $scope.source;
        $scope.foo = function(ngClickResult) { 
            $scope.showNgClick = this.result;
            $scope.ngClickResults = ngClickResult;
    

The definition for $scope.source is provided here.


        angular.forEach($scope.items, function (item) {
            if(item.fname === enteredValue.firstName ){
                arrItem.push({
                    first: item.fname,
                    last: item.lname,
                    address: item.address,
                    phone: item.phone

                });
            }
        });
        $scope.source= arrItem;
    

HTML

 
        <tr data-ng-repeat="ngClickResult in ngClickResults">
            <td>First Name:{{showNgClick.firstName}}</td>
            <td>Last Name:{{showNgClick.lastName}}</td>
            <td>Address:{{showNgClick.address}}</td>
            <td>Phone:{{showNgClick.phone}}</td>
        </tr>
    

I have a feeling that there is something missing in my results/source. What could it be?

Check out this Plunker link

Search for Tim to start the search.

My objective is to populate the table under NG Click Results with the data displayed in NG grid. I aim to display first name, last name, address, and phone under NG Click Results. When clicking on a row, I want to show all the data associated with that selected row in the grid. For example, click on the first row to display its data, then click on the second row to show its respective data, and so on.

Answer №1

Here are a couple of things to consider:

First, in your cellTemplate, make sure to pass the row object into the function foo so that you can reference the data through row.entity.

cellTemplate: '<div  ng-click="foo(row)" ng-bind="row.getProperty(col.field)"></div>'

Secondly, if you want to keep track of which rows have been clicked, initialize a list on $scope and add or remove from that list accordingly when a user clicks. Then use ng-repeat to display those selected rows.

$scope.ngClickResults = {};

$scope.foo = function(row) {
  //check if row is already selected, if it is unselect else add row
  if (!$scope.ngClickResults[row.rowIndex]) {
    $scope.ngClickResults[row.rowIndex] = row.entity;
  } else {
    delete $scope.ngClickResults[row.rowIndex];
  }
};

Lastly, ensure consistency in variable names and data references throughout your code to avoid errors or repetition. Make sure to use the correct variables defined in ng-repeat within your table structure.

<tr data-ng-repeat="(key, ngClickResult) in ngClickResults">

        <td>First Name:{{ngClickResult.first}}</td>

        <td>Last Name:{{ngClickResult.last}}</td>

        <td>Address:{{ngClickResult.address}}</td>

        <td>Phone:{{ngClickResult.phone}}</td>
</tr>

I've made some adjustments in this plunker to demonstrate these changes. Clicking on a row should now update the table below the grid accordingly.

Please be aware that there may be a bug where not every click triggers the function for highlighting and selecting rows in the grid.

Check out the updated version here.

Hope this explanation helps!

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

Sign up with React: A seamless registration form for

Currently, I am working on integrating a signup feature into my React application Here is a snippet of the code from my signup.JSX file: const Senddata = () => { // if(isvalid.username && // isvalid.password && ...

There seems to be an issue with the $scope value not being properly updated

In my AngularJS application, I am trying to update a $scope variable and display it in a Bootstrap modal. However, the new value is not appearing in the modal. Here is my code: View: <li ng-controller="QuickViewController"> <a href="javascri ...

Issue with idangero.us swiper: resizing problem occurs when image exceeds window size

Having an issue where resizing my window causes the image to become larger than anticipated. As a result, the current image is partially cropped on the left side while the previous image starts to show through. Here's a description of what's happ ...

No image upload possible until 'submit' button is clicked

I'm attempting to send an mp3 file to the server using AJAX without the need for a submit button, but I'm facing an issue where the file isn't getting uploaded. Can anyone help me pinpoint the mistake in my code? <script> $(document). ...

AngularJS views malfunctioning following oauth redirect

I am in the process of creating a web application using AngularJS and Firebase. Recently, I added a second page along with an ng-view to my index file. In order to facilitate login via Facebook or Google, I am utilizing the $firebaseAuth service. However, ...

If the iframe's CSS source is updated, the parent's CSS source will also change

I'm currently working on a unique school project that involves creating multiple CSS styles for different views. <link rel="stylesheet" type="text/css" href="css/main.css" title="main" media="screen"> <link rel="stylesheet" type="text/css" h ...

How can I retrieve the value of a div nested within another div?

Alright, let's talk about a situation where we have a draggable HTML div element: <div id="server" draggable="true" ondragstart="return dragStart(event)">Server</div> and also a target div: <div id="target1" ondragenter="return dragE ...

Gather information for an angular-meteor application

Currently, I am working on an application that involves a MongoDB collection of TV channels. The app has been growing steadily, but now there is a request to create a separate external app or page with its own domain specifically for showcasing the update ...

Creating a link using curly braces {{ }} in VUE js

I need assistance in creating links to different pages using data in curly brackets {{ }}, I am having trouble figuring out the correct way to implement them. <div id="app"> <div v-for="data in categorie"> &l ...

What is the best way to handle a very large JSON output in Node.js?

Working with shell.js to run unix commands in node.js and using bull for task queuing. The process involves providing an array of tasks: { "tasks": [ { "name": "task1", "command" ...

How to troubleshoot missing API data in a Bootstrap 5 modal

I am currently working on a project involving a Pokemon API where I have successfully built the front end using .fetch(). My goal is to create an additional modal that displays some stats. However, I am struggling to get the data from the API to show up in ...

Implement a loading bar on the entire page in Vue.js while a request is being made

There is an "edit" button on my page which allows me to edit certain elements and either save or close without saving. I would like to implement a loading bar that displays when the user clicks the "save" button, indicating that the data is being processe ...

A guide on obtaining the date format according to locale using Intl.DateTimeFormat within JavaScript

Can someone assist me in obtaining the standard date format (such as MM/DD/YYYY) based on a specified local id? The code snippet provided below is not returning the desired format. Any guidance on how to achieve this would be greatly appreciated. var da ...

What is the best way to utilize Typescript when making queries to Firebase?

I have successfully integrated push notifications for my app using Firebase Cloud Functions. Now, I am looking to enhance the user experience by updating the app's badge count alongside the push notifications. I understand that this can only be achiev ...

Tips for utilizing New FormData() to convert Array data from an Object for executing the POST request with Axios in ReactJs

When working on the backend, I utilize multer to handle multiple file/image uploads successfully with Postman. However, when trying to implement this in ReactJS on the frontend, I find myself puzzled. Here's a sample case: state = { name: 'pro ...

Load data asynchronously using a promise in select2

Is there a way to load options for select2 asynchronously without using ajax requests? I want to retrieve values from a promise object instead. Currently, my code loads data in the query function, but this means that it queries the data with every keystrok ...

What is the best way to retain the leading zeros when creating a new Number() in JavaScript?

Hey everyone, I'm running into some issues with this specific function. const incrementString = str => { if (!str.match(/[\d+]$/)){ return str += 1 } else{ return str.replace(/[\d+]$/, match => new Number(match) + 1) } ...

Iterate through nested objects in Javascript

I am having trouble extracting only the word from each new instance of the newEntry object. It shows up in the console every time I add a new word, but not when I assign it to .innerHTML. Can someone assist me with this issue? Full code: <style ty ...

Unexpectedly, the child component within the modal in React Native has been resetting to its default state

In my setup, there is a parent component called LeagueSelect and a child component known as TeamSelect. LeagueSelect functions as a React Native modal that can be adjusted accordingly. An interesting observation I've made is that when I open the Lea ...

How do I combine Firefox binary specification with adding the Firebug extension when using Selenium?

Presently I am utilizing the code below. var co = require('co'); var WebDriver = require('selenium-webdriver'); var SeleniumServer = require('selenium-webdriver/remote').SeleniumServer; co(function *() { // async var ser ...