Looking for guidance on how to specify the angular direction in the ng-repeat

I am facing a challenge with the structure of my ng-repeat directive and I am having trouble navigating through it. Here is a representation of the data in array format JSON style

{"data":[
         ["sameer","1001",
          [
           {"button_icon":"fa fa-pencil",
            "button_tt":"create invoice",
            "button_color":"btn-success"
           },
           {"button_icon":"fa fa-pencil",
            "button_tt":"create invoice",
            "button_color":"btn-danger"
           }
          ]
         ],
         ["jack","1002",
          [
           {"button_icon":"fa fa-pencil",
            "button_tt":"create invoice",
            "button_color":"btn-success"
           },
           {"button_icon":"fa fa-pencil",
            "button_tt":"create invoice",
            "button_color":"btn-danger"
           }
          ]
        ]
}

The structure consists of an array that contains another array containing more arrays. The last internal array holds buttons to be appended with each row. I am struggling with appending these buttons. Although nested ng-repeats are already being used, I am finding the third one confusing.

This is the HTML code snippet: 

<tbody>
    <tr ng-repeat = "row in list.data">

      <td ng-if = "(row.length - 1) != $index"  class="text-center"  ng-repeat = "val in row track by $index" ng-cloak>{{val}}</td>
      <td ng-if = "(row.length - 1) == $index" class="text-center">
          <div class="btn-group" ng-cloak>
            <a ng-repeat = "btn in row" data-toggle="tooltip" title="{{btn.button_tt}}" class="btn btn-xs {{btn.button_color}}" data-original-title="Edit" ng-click="viewExpense(1)"><i class="{{btn.button_icon}}"></i></a>
          </div>
        </td>
    </tr>

javascriptangularjsangularjs-ng-repeatangular-ng-if

Answer №1

It seems like you may need to include an additional loop.

The first level is represented by row in row in list.data:

["sameer","1001",
      [
       {"button_icon":"fa fa-pencil",
        "button_tt":"create invoice",
        "button_color":"btn-success"
       },
       {"button_icon":"fa fa-pencil",
        "button_tt":"create invoice",
        "button_color":"btn-danger"
       }
      ]
 ]

The second level, represented by btn in btn in row, is also an array:

[
    {"button_icon":"fa fa-pencil",
     "button_tt":"create invoice",
     "button_color":"btn-success"
    },
    {"button_icon":"fa fa-pencil",
      "button_tt":"create invoice",
      "button_color":"btn-danger"
    }
]

To add a third level, follow this structure:

<div class="btn-group" ng-cloak>
    <div ng-repeat = "innerRow in row">
        <a ng-repeat = "btn in innerRow" data-toggle="tooltip" title="{{btn.button_tt}}" class="btn btn-xs {{btn.button_color}}" data-original-title="Edit" ng-click="viewExpense(1)"><i class="{{btn.button_icon}}"></i></a>
    </div>
</div>

I hope this explanation clarifies things for you!

Answer №2

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
<table>
    <tr ng-repeat="row in data.data">
        <td ng-if="(row.length - 1) != $index" class="text-center" ng-repeat="val in row track by $index" ng-cloak>
            {{val}}
        </td>
        <td ng-if="(row.length - 1) == $index" class="text-center">
            <div class="btn-group" ng-cloak>
                <div ng-repeat="innerRow in row">
                    <a ng-repeat="btn in innerRow" data-toggle="tooltip" title="{{btn.button_tt}}"
                       class="btn btn-xs {{btn.button_color}}" data-original-title="Edit" ng-click="viewExpense(1)"><i
                            class="{{btn.button_icon}}"></i></a>
                </div>
            </div>
        </td>
    </tr>
</table>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
   $scope.data = {
  "data": [
    [ "sameer", "1001",
      [
        {
          "button_icon": "fa fa-pencil",
          "button_tt": "create invoice",
          "button_color": "btn-success"
        },
        {
          "button_icon": "fa fa-pencil",
          "button_tt": "create invoice",
          "button_color": "btn-danger"
        }
      ]
    ],
    [ "jack", "1002",
      [
        {
          "button_icon": "fa fa-pencil",
          "button_tt": "create invoice",
          "button_color": "btn-success"
        },
        {
          "button_icon": "fa fa-pencil",
          "button_tt": "create invoice",
          "button_color": "btn-danger"
        }
      ]
    ]
  ]
};
});
</script>

</body>

Answer №3

Check out this Jsfiddle

JavaScript

  var app = angular.module('myApp', []);

  app.controller('ctrl', function($scope) {
    $scope.list = {
      "data": [
        ["sameer", "1001", [{
          "button_icon": "fa fa-pencil",
          "button_tt": "create invoice",
          "button_color": "btn-success"
        }, {
          "button_icon": "fa fa-pencil",
          "button_tt": "create invoice",
          "button_color": "btn-danger"
        }]],
        ["jack", "1002", [{
          "button_icon": "fa fa-pencil",
          "button_tt": "create invoice",
          "button_color": "btn-success"
        }, {
          "button_icon": "fa fa-pencil",
          "button_tt": "create invoice",
          "button_color": "btn-danger"
        }]]
      ]
    };
  });

HTML

    <div ng-app='myApp'>

      <div ng-controller='ctrl'>
        <div ng-repeat="row in list.data">
          {{row[0]}} {{row[1]}}
          <a href='#' ng-repeat='btn in row[2]'> {{btn.button_icon}} {{btn.button_tt}} {{btn.button_color}} <br></a>
          <hr>
        </div>
      </div>
    </div>

Feel free to use this as a reference!

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

Can you assist in resolving this logical problem?

exampleDEMO The code above the link demonstrates how to control input forms based on a button group selection. In this scenario, when a value is inputted on the 'First' Button's side, all input forms with the same name as the button group ...

javascripthtmlangularjs

Tips for creating a 360 x 235 degree FOV image using three.js

My camera captures round images with a 235-degree field of view, like this one: https://i.sstatic.net/qNfrX.jpg I am familiar with threejs and have successfully rendered 360x360 images as equirectangular projections. However, I want to use threejs to rend ...

javascriptthree.jstexture-mapping

Am I on the right track with incorporating responsiveness in my React development practices?

Seeking advice on creating a responsive page with React components. I am currently using window.matchMedia to match media queries and re-rendering every time the window size is set or changes. function reportWindowSize() { let isPhone = window.matchMed ...

javascripthtmlreactjscss-grid

After refreshing, the LocalStorage in Angular 2 seems to disappear

Something a little different here :) So, when attempting to log a user in, I am trying to store the access_token and expires in localStorage. It seems to be working "okay". However, if I refresh the page, the tokens disappear. Also, after clicking the log ...

javascriptangular

Trouble with the ejs <%- body %> rendering properly

I plan to utilize a predefined layout template named layout.ejs, and here is the code present in the file: <html> <head> <title></title> </head> <body> <%- body %> </body> </html> Currently, I ...

javascriptnode.jsexpressejs

An error occurs when trying to load data into a grid upon clicking, resulting in an Uncaught TypeError: Unable to access properties of undefined (specifically 'dataState')

I have implemented a grid in React using a specific library, and I want to populate the grid with data fetched from an API call when the user clicks on a button labeled Fetch Products. However, I encounter an error during debugging: Uncaught (in promise) T ...

javascriptreactjs

What could be the reason my homing missile algorithm is not functioning properly?

The code I'm currently using for my projectile was heavily inspired by an answer I found on a game development forum, but it's not working as expected. Most of the time, the initial direction of the projectile is perpendicular to the target inste ...

javascriptmath2dgame-physicsvector-graphics

Exploring Methods to Iterate through an Object Utilizing Two Arrays

Attempting to iterate through states passed as props in another component state = { question:[firstQ, secondQ, thirdQ], tag:[[1,2,3],[4,6],[a,b,c,d]] } I aim to display it on the next Componet with a pattern like: FirstQ [tag1] SecondQ ...

javascriptarraysreactjsloops

Storing user input in MongoDB after encoding

I am currently exploring the most effective methods for storing and presenting user input in MongoDB. In traditional SQL databases, it is necessary to encode all user input as a precaution against injection attacks. However, in the context of MongoDB, ther ...

javascriptpythonajaxmongodbunicode

Performing a multitude of if statements simultaneously consistently results in an undefined outcome after the sixth iteration

Oops! I can't believe I forgot my original question! Every time I run the sixth if statement in my code, I encounter a typeError Undefined. Interestingly, when I switch the positions of the fifth and sixth statements, the if(!data.body.main) condition ...

javascriptnode.jsif-statement

swap out an element in an array with an extra element

My array contains elements with both id and des properties. I would like to add an additional property like value:0 to each object in the array. I achieved this using a loop. let data = [ { "id": 1001, "des": "aaa" }, { ...

javascriptarraysangulartypescriptecmascript-6

Utilizing Firebase Cloud Messaging for push notifications in Twilio Conversations

I am currently facing a challenge in setting up push notifications using Twilio Conversations and Firebase Cloud Messaging on a Next.js 12 app. The documentation assumes the use of Firebase 8 syntax, but I am working with Firebase 9 in this case. I have be ...

javascriptnext.jsfirebase-cloud-messagingtwilio

Having trouble retrieving properties from a JavaScript JSON object?

I am currently working with a JSON object that contains properties for MAKEs, MODELs, YEARs, STATEs, PLATEs, and COLORs. There are 4 instances of each property within the object: Object {MAKE1="xxx ", MODEL1='xxx', YEAR1='xxx', STATE1= ...

javascriptjson

Declaring a sophisticated array as a property within another property in Typescript

As a newcomer to Angular and Typescript, I am facing a challenge while declaring a property with a complex array as one of its values. Here is what I have attempted: groupedItem: { customGroupId: string, cgName: string, category: [{ cu ...

javascriptarraysjsonangulartypescript

Unable to send message using window.parent.postMessage when src is set to "data:text/html;charset=utf-8" within an iframe

I'm currently working on a project to develop a compact editor that allows users to edit HTML using an iframe. I'm passing an HTML string into the src attribute as data:text/html, but I'm encountering challenges with communication in the par ...

javascripthtmlangularjs

A guide on converting TypeScript to JavaScript while utilizing top-level await

Exploring the capabilities of top-level await introduced with TypeScript 3.8 in a NodeJS setting. Here's an example of TypeScript code utilizing this feature: import { getDoctorsPage } from "./utils/axios.provider"; const page = await getDo ...

javascriptnode.jstypescripttop-level-await

Can you explain the distinctions between using this['key'] and $data['key'] in the context of v-model?

Take a look at the snippet below, which includes three demos. The first two demos are functioning correctly (v-model is working fine). However, in the last demo, when you type something into the <input>, you will notice that this['test 1'] ...

javascriptvue.js

Automatically adjust the top margin of the content section to accommodate a fixed header height

After extensive searching, I've come across various solutions but none of them seem to fit my needs. I am a beginner/amateur developer. The issue I am facing is with a fixed header that resizes when scrolling. I understand that by adding padding-top: ...

javascripthtmlcss

Visual Studio - TypeScript project synchronization issue

Currently using the 2015 version of Visual Studio Community, I am facing an issue while working on a typescript project. Whenever I make modifications to the code, debug it, and save it using ctrl + s followed by refreshing the browser with ctrl + r, the c ...

javascriptvisual-studiotypescript

What is the best way to efficiently input identical data into multiple controllers ($scope) using just one call in AngularJS?

I have a situation where I am using a factory to make a call in two controllers on the same page. However, I want to avoid making an AJAX call twice. I tried using $q.defer(), but it doesn't seem to be working! Here is the code snippet: (function ...

javascriptangularjsajaxcontrollerfactory