Managing a two-dimensional array in AngularJS: tips and tricks

I have a JSON source that provides me with a double array:

// Function and module code omitted ..
$scope.texts = [
  ['Small sheep and ham.'],
  ['Ducks go moo.', 'Helicopters and racecars go bang!']
];

My goal is to display each string in the array within a <p> tag.

Initially, I attempted the following (example):

<div ng-repeat="text in texts">
  <p ng-repeat="p in text">{{p}}</p>
</div>

However, this prints out all the lists,

HOWEVER: I would like the ability to select which array to display through an external controller or directive.

Is there a way to programmatically choose the array to be displayed?

javascriptarraysangularjs

Answer №1

Is this the kind of thing you're looking for? http://jsbin.com/OBoHoSe/1/edit

<body ng-app="myapp">
<select ng-model="textidx">
   <option value="0">Level 0</option>
   <option value="1">Level 1</option>
</select>
<div ng-controller="MainCtrl">
   <div ng-repeat="text in texts[textidx]">
     <p>{{text}}</p>
   </div>
</div>
</body>

Just like jlareau pointed out: It's an Array within an Array, so you need to specify an index for the one to be repeated.

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

Is it possible to send a message from a child iframe to its parent using HTML5 cross-browser compatibility

I've been following this tutorial on a video-sharing website, which demonstrates how to securely pass messages between an iframe and its parent. The tutorial can be found at a specific URL. To achieve this functionality, you would end up with a simila ...

javascripthtml

How can you make sure that mouse events pass through the KineticJS stage?

Is it possible to have a PanoJS3 component covering the entire screen with a KineticJS stage on top, but still allow touch events to pass through the KineticJS stage to what lies beneath? I want shapes on the stage or layer to receive the touch events, wh ...

javascriptkineticjs

Error: The outcome of the function is not being displayed

I've been encountering an issue with rendering the result of the function renderVerticalCards. Despite confirming that the function is indeed being called through the console, nothing is displayed in the DOM except for the outer divs from outside the ...

javascriptreactjsmithril.js

Tips for managing post-generated buttons using jQuery?

I've created buttons using JavaScript and added them to my HTML. Now I want to use jQuery to handle the clicks on b_1 and b_2. How can I make this work? $("#mainbutton").click(function (){ document.getElementById("content").innerHTML = '< ...

javascriptjqueryhtml

Angular Field Reverting Back to Default Name During Editing

I need assistance with a remote process to retrieve a user's name and then allow it to be edited and saved. Although I am successful in obtaining the name, any attempt to change it results in it reverting back to the original name. Could there be an ...

angularjsx-editable

The mouse movement event will not be triggered for every frame when a keyboard event occurs

When the mouse is moving in a browser, ideally the mousemove event should fire every frame. However, if a key is pressed or released (or repeated), the mousemove event stops firing for a frame or two. To test this behavior, you can use the code snippet bel ...

javascriptdom-eventsmousemove

Is there a way to make Express.js pass parameters with special characters exactly as they are?

I am currently working on a project within the freeCodeCamp "API and Microservices" curriculum that involves using Express.js to handle routes. The project itself is relatively straightforward, with some pre-defined routes and others that need to be creat ...

javascriptapiexpresshttpparameters

Showing information on the webpage obtained from parsing the data

I have successfully retrieved data from the offers table and displayed it on both the console log and the HTML page after resolving async issues with the Q.promise. Now, I am attempting to add data from the users table to the page as well. While I can see ...

javascriptangularjsarraysparse-platformparse-server

Unable to utilize the post method in Node.js

<form class="ui form" action"/submit" method="post"> <div class="field"> <label>Time dedicated to studying:</label> <input type="number" name="study" placeholder="Total time spent on studies:"> ...

javascriptnode.jsmongodbexpress

Design a clear button for MUI autocomplete feature

I'm currently working on a project where I need to implement a button that clears the MUI autocomplete value and removes the data from the UI. Although I've managed to delete the data from the UI with the code provided, the onChange value remain ...

javascriptreactjsreact-hooksmaterial-uiautocomplete

Angular-oauth2-oidc does not successfully retrieve the access token when using OAuth2 and SSO

Here's an issue I'm facing: I've been attempting to integrate SSO and OAuth2 flow using angular-oauth2-oidc. When testing with POSTMAN and ThunderClient in VS Code, I managed to receive the correct response (the access_token). However, I am ...

javascriptangularoauth-2.0single-sign-onaccess-token

Ensuring the accuracy of URLs using JavaScript

I am developing a form with an input field for entering a URL and a submit button. I want to incorporate JavaScript validation to show an alert box when a correct URL is entered. Is it achievable using JavaScript? If so, can you please guide me on how to i ...

javascriptphpjquery

Dynamically tracking the mouse position during scrolling in AngularJS

Is it possible to retrieve the mouse coordinates during a scrolling event? Assuming I have the following code snippet: angular.element($window).bind("scroll", function() { console.log("scroll"); // How can I get the current mouse posi ...

angularjs

Is there an official IRC channel for YUI?

Although the yui3 documentation is quite helpful, it can also be beneficial to ask unconventional questions in order to discover the best practices. Are there any gatherings or meetups for all the talented yui developers out there? ...

javascriptuser-interfaceyuiyui3

Ways to identify when a user presses the back or forward arrow on a browser using JavaScript or jQuery for a non-single page application (

There are only 2 routes available: / and /about When on the following URLs: localhost:8080 -> it displays the home page localhost:8080/about -> it shows the about page If a user opens the home page, clicks on the about button, and goes to the abou ...

javascriptjquerynode.jsejs

Using Google App Engine with Python as the back end and AngularJS as the front end is a powerful combination

I am currently working on establishing end-to-end data sharing between GAE using Python and an AngularJS mobile app. The communication is done through JSON as the request body from the mobile app with a contentType set to application/json. Upon checking my ...

pythonjsonangularjsgoogle-app-enginemobile

Leveraging ng-repeat with nested JSON data, including JSON within JSON

I'm fairly new to working with Angular and I've run into an issue involving JSON data and ng-repeats. My specific problem involves a list of "modules" with nested lists of "weeks" within them: { "modules": { "module1": ...

angularjsangularjs-ng-repeat

A guide on achieving server-side rendering in React despite facing various conflicts with React Router versions

I encountered an error while trying to implement server-side rendering with React and react-router-dom. The error message You should not use Switch outside a Router has me puzzled. I suspect it might be due to a version conflict, but I'm searching for ...

javascriptnode.jsreactjsreact-router

Unable to assign a value to a dropdown using Angular.js and PHP

I am encountering a slight issue with setting the data as a selected value in a dropdown after fetching it from the database. Below is an explanation of my code. plan.html: <div class="input-group bmargindiv1 col-md-12"> <span class="input-g ...

javascriptphpangularjs

Can you effectively leverage a prop interface in React Typescript by combining it with another prop?

Essentially, I am looking to create a dynamic connection between the line injectComponentProps: object and the prop interface of the injectComponent. For example, it is currently set as injectComponentProps: InjectedComponentProps, but I want this associat ...

javascriptreactjstypescript