How can you display an item in Angular JS only if there are elements in the ng-repeat loop

In my JSON data, a series of objects contain an array called "options". Some of these objects have items in this array while others do not. An example is shown below:

{
  "label": "ORDERS",
  "enabled": true,
  "selected": true,
  "options": [
    {
      "label": "Edit addresses",
      "value": true
    },
    {
      "label": "Cancel orders",
      "value": true
    },
    {
      "label": "Uncancel orders",
      "value": false
    }
  ]
},
{
  "label": "FOO",
  "enabled": true,
  "selected": false,
  "options": [

  ]
},

From the above example, you can see that "ORDERS" has options, while "FOO" does not.

This results in a layout that looks like this:

In addition to the repeater data, I have items such as the "Allowed" header and a checkbox.

I only want to display these items when the "options" array is not empty. This is how I have structured it: http://plnkr.co/edit/QLY9311r4nSCRUolKvLs?p=preview

However, I am struggling to find a way to hide the rows containing the "Allowed" header and checkbox when the "options" array is empty:

javascriptangularjsangularjs-ng-repeat

Answer №1

Is this the correct solution?

    <tr ng-if="t.options.length">
      <td colspan="2"></td>
      <td align="center">Permitted</td>
    </tr>
    <tr ng-if="t.options.length">
      <td colspan="2"></td>
      <td align="center">
        <input type="checkbox" name="" id="" />
      </td>
    </tr>
    <tr ng-repeat="o in t.options">
      <td></td>
      <td>{{o.label}}</td>
      <td align="center">
        <input type="checkbox" ng-model="o.selected" />
      </td>
    </tr>

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

Issues arising from the lack of synchronization between the original scope and the angularJS

I am working with scope.data that contains an array of objects. The data from this array is being shown in a table ordered by the x property. While the display in the table looks good, the scope.data object itself is not sorted to match what's display ...

angularjs

What is the method for extracting latitude and longitude values individually from JSON data?

Upon receiving the JSON response from the Google Maps API stored in a variable named 'obj', I noticed that alerting obj.name returns "Pancakes on the Rocks". To access the icon, I can use obj.icon. However, I am struggling to retrieve separate va ...

javascriptjsongoogle-maps

"Exploring Angular UI-Router by conducting tests with the help of Mocha,

Experimenting with testing the following code in AngularJS using Mocha, Chai, and Sinon. $scope.send = function() { $state.transitionTo('module.sendhome'); }; Here is a test case for validation: it('send' , function () { scop ...

angularjsunit-testingmocha.jssinonchai

Error encountered when asynchronously iterating over an object in TypeScript

Could someone please help me understand why I am getting an error with this code? var promise = new Promise((resolve, reject) => { resolve([1, 2, 3, 4, 5]); }); async function doSomethingAsync() { var data = await promise; data.forEach(v = ...

javascripttypescriptecmascript-6

Using ${} syntax to implement dynamic logic when constructing a string in Express.js

I need to iterate through an object and display values for each one while creating a string. Any suggestions on how to achieve something like this: const body = ` <h1>Values</h1> ${ for (value in values) { return `<h2>Ind ...

javascriptarraysobject

Direct your attention to the final item in a visible array within a ReactJS component

Currently, I'm in the process of developing a chat application using reactjs and am faced with the challenge of adjusting focus to the latest message whenever a new one is added to the array. The structure of my react chat window is as follows: < ...

javascriptarraysreactjsfocus

Node 19820 threw an uncaught promise rejection warning due to a TypeError stating that it cannot read the property 'byteLength' of an undefined value

I'm currently working on developing an API with the use of Express to enable the upload of images to Firebase storage. However, whenever I try to access this particular endpoint, an error message is displayed: "(node:19820) UnhandledPromiseRejectionWa ...

javascriptnode.jsfirebaseapiexpress

Troubles with submitting jQuery validation plugin via AJAX

Whenever I try to use the jQuery validation plugin for validating a form within a Bootstrap modal, the validation does not work and the form cannot be submitted. This is the code for the Bootstrap modal form: <div class="modal fade" id="form-content" ...

javascriptjqueryhtmlajaxtwitter-bootstrap

Having trouble implementing render props for a toggle button that reveals/hides child components

My goal is to display or hide a couple of child components based on a toggle click using the original HTML structure provided. However, I am encountering an issue where the EditToggle link needs to be displayed next to the h2 element inside the "subtitle-c ...

javascripthtmlreactjs

Symbols in the URL undergo hexadecimal conversion while the page is loading

Whenever I click on a link, the URL changes abruptly during the page loading process. For example, when I click on a link like www.test.com/main#/?arg1=1&arg2=2, it initially appears in the URL bar. However, as the page loads, the URL suddenly transfo ...

ruby-on-railsangularjsurl

Difficulty connecting to the API endpoint in AWS

I created a two-tier MEAN application with the authentication API backend hosted on AWS EC2 and the Angular front-end hosted on AWS S3 as a static site. During development, I ran the auth backend using node/express on http://localhost:5719/. For the front ...

angularjsnode.jsamazon-web-servicesexpressamazon-ec2

Error message for validation does not appear when a custom validation directive is included and the minimum length is not

How can I display an error message when the length of a password is less than 5 characters? I have attempted to implement this functionality, but the error message "Length must be greater than 5" is not being displayed. It seems to work when I remove the & ...

angularjs

Navigating through an array containing references to object IDs with Mongoose

In my meanjs project, I am receiving user input on the server with a specific request body structure: { transaction: { heading: '', items: [Object] }, something: {}, somethingAgain: {} } The format of the items a ...

javascriptnode.jsmongodbasynchronousmongoose

Can you explain the distinction between data-ng and ng?

I recently came across a discussion about the distinction between ng-* and data-ng-* in AngularJS. Apparently, using data-ng-* ensures that the HTML remains valid. But I can't help but wonder, why is this necessary when I can simply declare the ang ...

javascriptangularjs

Adding options for a select tag from JavaScript can be accomplished by using the DOM manipulation methods

I am working on a form that includes drop-down menus. The options for the select tag need to change dynamically based on the id value. For instance, if the id is 1, the select tag options should be cat and dog. If the id is 2, the options should be apple ...

javascriptjqueryruby-on-railsruby-on-rails-3

Transferring canvas element via socket with JS stack size limit

I'm encountering an issue where I need to transfer a canvas element over sockets using socket.io and Node.js. The code snippet below illustrates my approach: var myCanvas = document.getElementById("myCanvas"); var ctx = myCanvas.getContext("2d"); // ...

javascripthtmlsocket.iohtml5-canvas

Using Node JS as both an HTTP server and a TCP socket client simultaneously

Currently, I am developing a Node.js application to act as an HTTP server communicating with a TCP socket server. The code snippet for this setup is displayed below: var http = require('http'); var net = require('net'); var url = requi ...

javascriptnode.jssocketstcp

Issues with visuals in jQuery.animate

I have nearly finished implementing a slide down drawer using jQuery. The functionality I am working on involves expanding the drawer downwards to reveal its content when the handle labeled "show" is clicked, and then sliding the drawer back up when the ha ...

javascriptjqueryjquery-animate

Pass a URL string to a different script using Node.js

Currently, I am delving into the world of Node.js, utilizing Express with Jade and Mongoose as my primary tools. Originating from a background in PHP, transitioning to Python, and embracing MVC principles through Django, my aspiration is to create a multip ...

javascriptnode.jsexpressurl-mapping

What is the most efficient method for storing and accessing a large matrix in JavaScript?

With 10000 items, creating a matrix of 10000 rows * 10000 columns using a one-dimensional array would be massive. Additionally, setting specific values to cells (i,j) where 0 < i, j < 10000 would require a large number of iterations. I am facing cha ...

javascriptnode.js