Using AngularJS to display a targeted row in a table

Question

Using AngularJS to display a targeted row in a table

I am currently working with a basic table and using ng-repeat to display rows in the table.

I have a specific requirement where I want to show an additional row when a regular row is clicked. This additional row should contain custom markup in just one column. Here is what I have attempted:

parentTr.after(angular.element('<tr md-row>New row</tr>'));

However, instead of rendering the new row, it displays [[object HTMLTableRowElement]]. Any suggestions on how to achieve this?

P.S. Here is an image for reference: https://i.sstatic.net/YoIgs.png

P.S. This is how the table is currently rendered:

<tr ng-repeat="row in rows">
    <td>{{ row.name }}</td>
    <td>{{ row.status }}</td>
</tr>

I am unable to simply add a new row to my rows array because the new row only has one column. I need to extend this row to span the entire length of the table by passing the colspan attribute to the new row.

javascript angularjs render

Answer 1

Answer №1

Check out the Plunker Code for the feature you are looking to implement

$scope.addNewRow = function($event){
  // This function retrieves the target from the clicked row, which can be replaced 
  // with your desired parent element for appending
  var targetToAppend = angular.element( $event.target.parentNode.parentNode);
  targetToAppend.append('<tr><td colspan="2">Target<td></tr>');
}

In this example, a simple HTML structure is used with a click event bound to one of the rows for testing purposes. Unfortunately, we do not have access to the original source code for comparison.

<tr ng-repeat="row in rows">
  <td ng-click="addNewRow($event)"> {{ row.name }}</td>
   <td>{{ row.status }}</td>
</tr>

I hope this explanation is beneficial!

Answer 2

Check out the Plunker Code for the feature you are looking to implement

$scope.addNewRow = function($event){
  // This function retrieves the target from the clicked row, which can be replaced 
  // with your desired parent element for appending
  var targetToAppend = angular.element( $event.target.parentNode.parentNode);
  targetToAppend.append('<tr><td colspan="2">Target<td></tr>');
}

In this example, a simple HTML structure is used with a click event bound to one of the rows for testing purposes. Unfortunately, we do not have access to the original source code for comparison.

<tr ng-repeat="row in rows">
  <td ng-click="addNewRow($event)"> {{ row.name }}</td>
   <td>{{ row.status }}</td>
</tr>

I hope this explanation is beneficial!

Using AngularJS to display a targeted row in a table

Answer №1

Similar questions

It appears that the JavaScript array is able to modify itself autonomously

Enhancing State Management with CombineReducers in TypeScript

Setting up the initial 3 parameters in a v-for loop

Error [ERR_MODULE_NOT_FOUND]: Module could not be located in vscode

Invoking a function from a separate JavaScript file and finding out that an object is considered null

Ways to detect scrolling activity on the v-data-table module?

Is it possible for me to make the default export anonymous?

Prevent unexpected page breaks in <tr> elements on Firefox (Could JavaScript be the solution?)

Is there a way to show a loading icon during the image change process without using jQuery?

Update the style of the legend from bars to a line chart in chart.js version 2.4.0

An issue arose when trying to implement react-router within a multi-step registration process

Javascript's ability to import and export modules is a powerful feature

How can JavaScript nested AJAX requests and promises be properly chained together?

Begin by introducing a fresh attribute to a JSON entity

Commitments, the Angular2 framework, and boundary

How to calculate a date x days before a given date using javascript

What are some strategies I can implement to effectively manage different errors and ensure the app does not crash

I'm not satisfied with the value of the ReactJs state after the change

Implementing a secure route in Next.js by utilizing a JWT token obtained from a customized backend system

What is the reason that I have to submit my mapped function twice in order for the updated state to show after modifying the array content?