How to toggle between arrays using ng-repeat

Currently, I am managing 3 arrays and wish to toggle between them using ng-repeat:

$scope.fooDataObj = {
array1:[{name:'john', id:'1'},{name:'jerry', id:'2'}],
array2[{name:'bill', id:'1'},{name:'tom', id:'2'}],
array3:[]
}

Here is my ng-repeat code:

<li ng-repeat="data in fooDataObj track by data.id"></li>

My goal is to dynamically switch between the arrays of data within my object in the most efficient way possible.

Essentially, when a user clicks <button></button>, it should switch from utilizing array1 in the ng-repeat to array2.

I have achieved this by setting ng-repeat="data in fooData" and then triggering

$scope.fooData = fooDataObj.array1
on click. However, this method lacks performance, especially when switching between populated arrays and an empty array.

Answer №1

To easily switch the key, simply utilize bracket notation within the ng-repeat source field.

 <li ng-repeat="data in fooDataObj[vm.source] track by data.id"></li>

Upon button click, assign vm.source to the text array1, array2, array3. For a more dynamic approach where the key name is derived instead of hardcoded, retrieve the keys from the object using Object.keys(fooDataObj)

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

The JavaScript code is failing to retrieve the longitude and latitude of the location on a mobile browser

I am having an issue with my Javascript code not properly retrieving the longitude and latitude from the mobile Chrome browser. While this code works fine on laptop or desktop browsers, it seems to be failing on mobile devices: <script> if (nav ...

Problematic situation when using ng-repeat with dynamic ng-include and template variables scope conflict

When utilizing ng-repeat with dynamic ng-include that includes variables, the variables are not being properly recognized. Take a look at this code snippet. Here is the main HTML code: <table style> <tr> <th>Student</th> ...

Easily transfer files without the need to refresh the page by utilizing the power of AJAX

In my page file-upload.jsp, I have the following code snippet: <form action="" id="frmupload" name="frmupload" method="post" enctype="multipart/form-data"> <input type="file" id="upload_file" name="upload_file" multiple="" /> <in ...

Changing the size of various types of images

Is there a way in JavaScript to automatically resize and fill in a block with fixed width using different images with various dimensions? I came across something similar, but it was in AS2. I'm unsure if it can be translated to JavaScript. var _loc3 ...

After the update, Material UI is causing a TypeError by throwing an error stating that it cannot read the property 'muiName' of an

After updating from "material-ui": "^1.0.0-beta.38" to "@material-ui/core": "^1.3.0", I made changes to imports, ran npm install, removed node_modules and even deleted package-lock.json. However, I continue to encounter the cryptic error message TypeError: ...

Converting JSON to C# object in order to showcase nested array as a string within a grid display

Everything went smoothly during the run and Deserialize process, except for the Roles being displayed as System.Collections.Generic.List`1[System.String] Issue If I want to link each field to a grid. Is there a way to display the collection as a string w ...

Exploring the power of the cssContainingText locator feature in Protractor

Currently working on a framework utilizing Protractor, I encountered an issue with the cssContainingText locator from the Protractor API. The locator threw an invalidElement exception, which puzzled me. The structure of the HTML page appears as follows: ...

Ways to retrieve and upload a blob from a file object

After receiving a file object via an HTML input on-change event in my component.html: onFileSelected(event) { this.selectedFile = event.target.files[0]; } Now, I need to send a POST request to upload the image to the database. The database only acc ...

Steps for assigning a $scope variable from within a different $scope variable

I am facing an issue with setting the value of a $scope variable after a promise (specifically, an $http request) is completed. Here's the code snippet in question: .controller('NewItemCtrl', function ($scope, $state, LabelFactory) { $sc ...

Enhance the color scheme of your collapsed or expanded Bootstrap NAV for mobile devices

Currently working on customizing the navbar using Bootstrap. I've been able to style it perfectly for both desktop and mobile devices in its initial state. The issue arises when attempting to style the navbar in its expanded and collapsed states on m ...

Ways to transmit information from a modal to a function

Trying to figure out how to update data in an ng-grid after submitting a modal form with multiple text input controls. Should the ajax create function be called within the $scope.open controller section or resolve? $scope.open = function (size) { var mo ...

Tips for generating JavaScript within list elements using a PHP script

My PHP script is designed to fetch data from a database and display it as list items within a jQuery Dialog. The process involves creating an array in the PHP while loop that handles the query results, with each list item containing data, an HTML button, a ...

The Issue with Formatting Dates in Angular

I have an HTML code snippet that looks like this: <select name="paymentList" class="form-control" tabindex="" ng-focus="true" ng-disabled="!showRoomPaymentList" move-focus-by-enter ...

Incorporate the module into both the parent and child class

In my coding project, I have a situation where both a parent class and a child class are importing the same lodash library. This raises the question: will the final bundled JavaScript file contain duplicate lodash code? //Parent Class import Component fro ...

Learn the process of extracting a particular value from JSON data and displaying it in HTML by utilizing AngularJS's ng-repeat directive

As a newcomer to angularjs, I am encountering difficulties retrieving and displaying a specific value from a json file in order to showcase it on my view page using angularjs ng-repeat for image source. My goal is to repeat the json file based on a particu ...

The button labeled "modify layout" remains unresponsive when activated

Allow me to start by saying that I am not a coding expert. Currently, I am enrolled in a computer science class and have a basic understanding of HTML, CSS, and some Javascript. However, I have encountered a problem that I cannot solve. When I click on th ...

Customizing multi select in MUIv5 AutoComplete feature

My current challenge involves using the mui Autocomplete multi-select component. I'm having trouble getting it to function according to my specific requirements. Essentially, I need to set default selected values passed as props from the Parent compon ...

The autocomplete feature fails to properly highlight the selected value from the dropdown menu and ends up selecting duplicate values

After working on creating a multiple select search dropdown using MUI, my API data was successfully transformed into the desired format named transformedSubLocationData. https://i.stack.imgur.com/ZrbQq.png 0: {label: 'Dialed Number 1', value: &a ...

Securing a single component within a named view router in Vue.js

Within my routes configuration, I have a named view route set up: let routes = [ { name: "home", path: '/', components: { default: Home, project: ProjectIndex } } ] The goal is to ...

The <select> element in AngularJS 1.5 is showing the dropdown at unexpected moments, but only on iOS 10 devices

From the title, it's evident that this bug is both intriguing and frustrating. The issue lies with a regular select element in an Angular partial containing the following code: <select ng-options="availweek.weekNumber as availweek.weekNumber for a ...