How to add rows at a particular index within another row using ng-repeat

Check out this code snippet:

<tr ng-repeat="param in tags[$index].parameters">
            <td class="previewParamName">{{param.name}}</td>
            <td>
                <div ng-if="is_array(param)">
                    <div class="previewParamValue limitWidth">List <span class="arrayParamArrow" ng-click="showArrayParams(param)" ng-class="{'glyphicon glyphicon-chevron-down': !arrayCollapsed, 'glyphicon glyphicon-chevron-up': arrayCollapsed}"></span></div>
                </div>
                <div ng-if="!is_array(param)">
                    <div class="previewParamValue" tooltip-placement="bottom" tooltip="{{param.value}}" tooltip-trigger="mouseenter">{{param.value | limitTo : 25}}</div>
                </div>
            </td>
</tr>
<tr ng-hide="!arrayCollapsed" ng-repeat="params in arrayParameter">
      <td>{{params.name}}</td>
      <td class="wordBreak">{{params.value}}</td>
</tr>

I am aiming to place the second row with ng-repeat below a specific row within the first ng-repeat block, especially when the condition ng-if=is_array(param) evaluates as true. This condition signifies the need for additional sub rows related to that particular row. Your assistance on this matter would be greatly appreciated!

javascriptangularjsangularjs-ng-repeat

Answer №1

I can provide a solution for rendering arrays using Angular directives. You can achieve this by utilizing the ngRepeatStart and ngRepeatEnd directives.

Here is a simplified example of how you can structure your code:

<tr ng-repeat-start="param in tags.parameters" ng-init="param.arrayCollapsed = false">
    <td class="previewParamName">{{param.name}}</td>
    <td>
        <div ng-if="is_array(param)">
            <div class="previewParamValue limitWidth" ng-click="param.arrayCollapsed = !param.arrayCollapsed">
                List <span class="arrayParamArrow" ng-class="{'glyphicon glyphicon-chevron-down': !arrayCollapsed, 'glyphicon glyphicon-chevron-up': arrayCollapsed}"></span>
            </div>
        </div>
        <div ng-if="!is_array(param)">
            <div class="previewParamValue" tooltip-placement="bottom" tooltip="{{param.value}}" tooltip-trigger="mouseenter">{{param.value | limitTo : 25}}</div>
        </div>
    </td>
</tr>
<tr ng-repeat="p in param" ng-show="param.arrayCollapsed" class="params-row">
    <td>{{p.name}}</td>
    <td class="wordBreak">{{p.value}}</td>
</tr>
<tr ng-repeat-end></tr>

You can customize and adapt this code snippet to fit your specific requirements.

Check out the demo here: http://plnkr.co/edit/tW3rUYXqoM9fTNHdOf9K?p=info

Update: Improved Solution

The original code had a flaw where unnecessary empty tr elements were generated by ngRepeatEnd. Below is a more efficient solution that involves two repeaters, one on tbody and another on inner tr.

<table class="table table-bordered table-condensed">
    <tbody ng-repeat="param in tags.parameters" ng-init="param.arrayCollapsed = false">
        <tr>
            <td class="previewParamName">{{param.name}}</td>
            <td>
                <div ng-if="is_array(param)">
                    <div class="previewParamValue limitWidth" ng-click="param.arrayCollapsed = !param.arrayCollapsed">
                        List <span class="arrayParamArrow" ng-class="{'glyphicon glyphicon-chevron-down': !arrayCollapsed, 'glyphicon glyphicon-chevron-up': arrayCollapsed}"></span>
                    </div>
                </div>
                <div ng-if="!is_array(param)">
                    <div class="previewParamValue" tooltip-placement="bottom" tooltip="{{param.value}}" tooltip-trigger="mouseenter">{{param.value | limitTo : 25}}</div>
                </div>
            </td>
        </tr>
        <tr ng-if="is_array(param)" ng-repeat="p in param" ng-show="param.arrayCollapsed" class="params-row">
            <td>{{p.name}}</td>
            <td class="wordBreak">{{p.value}}</td>
        </tr>
    </tbody>
</table>

Improved demo available here: http://plnkr.co/edit/0V1hDOpl2wukKFeIZC1O?p=info

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

Looking for assistance with transferring a JavaScript array to my PHP script

Is there an easier way to transfer a JavaScript array to a PHP file? I've seen examples of using AJAX for this task, but I'm wondering if there's a simpler method. Below is a snippet of the code I'm working with: <html> <hea ...

javascriptphphtml

The Vue app utilizing Flickr API encounters an issue: "Unable to assign value to 'data' property as it is undefined."

Beginning the development of a simple one-page photo stream app using the public Flickr stream, I've encountered an error in my code: 'Cannot set property 'data' of undefined'. Here is a snippet of my code: <b-container> ...

javascriptvue.jsvuejs2jsonp

Update the inputs following the filtering or searching of issues in VueJS

As a newcomer to VueJS, I find myself struggling with a particular function and lack the experience to fully grasp it. To address my confusion, I have formulated a question (which may be similar to others). For instance, I utilized the computed propert ...

javascriptvue.jsvuejs2

Is there a way for my directive to prevent drag action when the dragleave event is triggered?

To enhance the manual sorting process of nested ngRepeats, I have implemented three directives: draggable, droppable, and drop boundary. The draggable and droppable directives are functioning correctly, utilizing event listeners to facilitate drag and dro ...

javascriptangularjsdrag-and-dropevent-handling

Tips for creating a custom axios response depending on the error code returned by the response

I am currently working on implementing a global error handling system in my Vue application. Within my project, I have an api.service.js file that contains the necessary code for Axios setup and various HTTP request functions such as get and post: /** * S ...

javascriptvue.jserror-handlingvuejs2axios

Creating a directive that dynamically expands templates for varying blocks of code based on different ng-repeat values

I have a snippet of code that I want to reuse across various HTML pages. The code in question is as follows: <h5>Brand</h5> <div> <div ng-repeat="brand in store.brands.tops"> <label> <input type="checkbox" ng-t ...

htmlangularjs

removing a property from an object using AngularJS

Currently, I am working on a project involving AngularJS. The main goal of this project is to create a dynamic JSON generator using AngularJS. I have already developed the initial version and it works well. However, there is a minor issue with my applicati ...

javascriptangularjs

How can we retrieve a boolean value from a Meteor.call() function to use in the Accounts.findUserByEmail(email

Currently, I am attempting to search for users by email in Angular and Meteor. In my client-side code, I am utilizing Accounts.findUserByEmail(). The method is being invoked asynchronously using Meteor.call(). However, the issue arises when trying to commu ...

angularjsmeteormeteor-accountsangular-meteor

When incorporating Request.js and Cheerio.js into Node/Express, an unexpected outcome may occur where an empty

I am currently in the process of creating a basic web scraper using Request.js and Cheerio.js within Express. My main goal at the moment is to extract the titles of various websites. Instead of scraping each website individually, I have compiled them int ...

javascriptnode.jsexpressasynchronouscheerio

Using Vuex in the router: A comprehensive guide

I am having trouble accessing data from the store in the router. I have attempted three different methods, but none of them seem to be working correctly. Here are the methods I tried: // ReferenceError: store is not defined console.log(store.state); // ...

javascriptvue.js

Scriptmanager and Rokbox clash in a heated confrontation

I'm having trouble getting RokBox to display images on my webpage because the asp:ScriptManager seems to be causing some issues. After trying to troubleshoot, I found that when I remove the following code: <asp:ScriptManager ID="ScriptManager1" r ...

javascriptjqueryasp.netscriptmanager

Adjust the fixed navbar position in MaterializeCSS as you scroll

First of all, I apologize for my limited proficiency in English. I have a website with a company logo at the top and a navigation bar below it. My goal is to change the position of the navigation bar to the top when scrolling past the company logo. I att ...

javascripthtmlmaterial-designmaterialize

Click on a specific button within a DataTable row

I am working with a dataTable that fetches data from the database using Jquery. In each row, there are two buttons for accepting or rejecting something. My goal is to make the accept button disappear when rejecting and vice versa. public function displayT ...

javascriptjquerydatatables

What is the best way to identify key presses using Javascript?

Exploring various resources online, I have come across multiple recommendations (such as using window.onkeypress or jQuery) but each option comes with its own set of criticisms. How can the detection of a keypress be achieved in Javascript? ...

javascripthtmlkeyboardonkeypress

Inverting Arrays Recursively with JavaScript

Currently, we are delving into functional JavaScript in my programming course with a particular assignment. However, I seem to be struggling to make the code work as intended. I would greatly appreciate any advice on how to improve this piece of code. Ever ...

javascriptarraysfunctional-programming

What is the process for AngularJS to automatically populate the initial tag value in an SVG template?

I'm currently working on an AngularJS directive that needs to update different attributes within an svg tag. angular.module("complexNumbers") .directive("cartesianPlane", function() { return { restrict: "E", scope: { }, templateUrl: " ...

javascriptangularjssvgangularjs-directiveangularjs-controller

Error Code 18: Unable to Open Database - Troubleshooting in AngularJS and Cordova

Looking to set up an SQLite database using Angular.js and Cordova without relying on Ionic? Check out the following steps for initializing your app. $(function() { new AppInitializer(); }); var AppInitializer = function() { // Determine platform - we ...

angularjssqlitecordova

Can JavaScript be used to update/override Prototype version 1.4 to version 1.7 on a different website?

(I'm uncertain about the best way to phrase this question, feel free to make changes). I am in the process of embedding a JS widget onto a different website that is using Prototype.js Version 1.4. I have incorporated jQuery into my widget and have it ...

javascriptprototypejsconflictjquery

Identifying the Operating System of Your Device: iOS, Android or Desktop

I am in need of displaying different app download links based on the user's operating system. This includes IOS, Android, or both if the user is accessing the page on a Desktop device. I am currently utilizing React and Next.js for this project. Unfor ...

javascriptreactjsnext.js

What is the best way for a service to provide both data and multiple promises to a controller?

I've created a service with functions like this: angular.module('common').factory('_o', ['$angularCacheFactory', '$http', '$q', '$resource', '$timeout', '_u', ...

angularjs