Issues with routeparams are preventing ng-repeat from functioning properly, without any response or resolution

For my shoppingCart project, I am working on dynamically bringing data into views. I am using routeParams in template.html but facing an issue. The data is arriving normally as checked via ng-href="#/store/{{something.name}}/{{ child.name }}" but it isn't working with ng-repeat.

index.html

<a style="cursor: pointer;" ng-href="#/store/{{something.name}}/{{ child.name }}">{{ child.display_name }}</a>

Routing in app.js

function store() {
    this.fruits = [
        new product("APL", "Apple", "Eat one every day to keep the doctor away!", 12, 90, 0, 2, 0),
        new product("BAN", "Banana", "These are rich in Potassium and easy to peel.", 4, 120, 0, 2, 1)];
}

template.html

<pre>$routeParams.Category = {{$routeParams.Category}}</pre>

I really need this to work otherwise I would have to call it like store.fruits,store.vegetables and would have to make separate files too for each of them. Please HELP

Answer №1

One thing that you may have overlooked is this particular line

<li class="col-sm-6 col-md-3 animate" ng-repeat="product in store.{{$routeParams.Category}} | orderBy:'name' | filter:search">

To make it work correctly, you should update it to the following

<li class="col-sm-6 col-md-3 animate" ng-repeat="product in store[$routeParams.Category] | orderBy:'name' | filter:search">

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

How to change a time in HH:mm format to a Date object using JavaScript

I am facing a challenge with converting two time strings to Date objects and subtracting their values. The times I have are: 14:10 and 19:02 To perform the subtraction, I attempted to parse them using the following code: var res = date1 - date2; Howev ...

Issue with React-select: custom Control prevents select components from rendering

Implementing react-select@next and referring to the guide here for custom Control components is not yielding the desired outcome. import TextField from "@material-ui/core/TextField"; import Select from "react-select"; const InputComponent = (props) => ...

When utilizing Md-select in Protractor, how can the dropdown list be accessed?

I am having trouble locating the option from the dropdown menu that I need to select. Despite trying various methods, I have not been successful. <md-select ng-model="card.type" name="type" aria-label="Select card type" ng-change="$ctrl.onCardSelecti ...

Retrieve Browser Screen Width and Height using MVC3 Razor in the View

I am facing a challenge on my website where I need to generate a Bitmap dynamically and ensure it is rendered according to the width and height of the browser so that there are no overflow issues on the page. Although I have successfully created an image ...

When I scroll and update my webpage, the navigation header tends to lose its distinct features. This issue can be resolved

When I scroll, my navigation header changes from being transparent to having a solid color, and this feature works perfectly. However, whenever I refresh the page while already halfway down, the properties of my navigation header are reset and it reverts ...

How can I make sure an animation only plays once during the current session?

I'm facing a dilemma with my website page that showcases animations using react-anime and react-typing-animation. The issue at hand is how to animate certain elements only once per session. In other words, if the main page animation triggers when the ...

ReactAppI am facing an issue where the browser fails to refresh the page upon saving changes in my JavaScript file using the VS code editor

Can anyone remind me of the tool we can install to refresh the browser page automatically whenever we save changes in our editor? ...

Tips for incorporating a variable into a JSON object value when dynamically constructing an object

Is there a way to dynamically create an array of objects using a for loop? I have different arrays with values for the key value pairs of these objects. The code snippet I tried is not producing the expected result. var characters = ['Iron Man', ...

Reset checkboxes in Material UI data grid

Currently, I am immersed in a React Js project that involves various tabs, each containing a unique data grid table with rows featuring checkboxes. Issue: Whenever I select a row from Table 1 and navigate to Tab 2 before returning to Tab 1, the checkboxes ...

Executing an AJAX request to insert data into MySQL

After my extensive online search, I came across a solution that involves using ajax to set information in my database. While browsing through this page, I learned how to retrieve data from the database. My specific query is: can we also use ajax to set in ...

The specified project directory was not detected. Please restart Next.js in your updated directory

I am facing a challenge with running my NextJS web app on a VPS server with PM2 as the Process Management tool. Despite trying different approaches, I am unable to get it to run properly. I have a deploy.js file that successfully deploys my other NextJS an ...

Tips on transferring values from script to controller in PHP using Laravel (for beginners)

I am trying to update the value in a textbox using a script and then save it in my database through my controller. Although the value in the textbox changes, the ajax call does not work as expected. I apologize for any mistakes, as I am still new to this p ...

What strategies can I use to enhance the efficiency of my code using AngularJS?

After conducting extensive research, I am still unable to find a solution or comprehend the code written by someone else - it simply does not work. As a result, my codebase has grown significantly. I am interested in optimizing my code using AngularJS func ...

PHP allows for creating dropdown lists where the values are dynamically dependent on the selection of another dropdown list within the same form

Is there a way for me to implement this solution? The values in the dropdownlist are based on another dropdownlist within the same form. For example, a form with dropdownlists for car names and models of that car, along with a search button. Please take no ...

Filter an array of objects to only include the unique values and remove any duplicates

var Error-dictionary = [ { code:599, MSG:'unknown' }, { code:404, MSG:'not found' }, { code:599, MSG:'unknown' } ] I would like to transform the data structure into som ...

HTML list with clickable elements for querying the database and displaying the results in a <div> element

Patience please; I am a newcomer to StackOverflow and this is my inaugural question. Struggling with writing an effective algorithm, I wonder if my attempts to "push" it forward are causing me to complicate what should be a straightforward concept, or if i ...

Importing the isPropertyUpdated method in Angular 4

My challenge lies in utilizing the isPropertyUpdated function within Angular 4. However, I have encountered a roadblock as Angular 4 does not facilitate deep imports. An example of an import that fails to work on Angular 4 is: import {isPropertyUpdated} ...

What is the best way to create several sets of a numerical field and a checkbox? (checkbox will deactivate a specific number field)

I'm having an issue with generating multiple pairs of a number field and a checkbox. When I click the checkbox, it should disable the number field. However, only the first pair seems to be working. Can anyone lend a hand? Here's the code snippe ...

Limiting the input in a text box to only allow whole numbers and no decimal values

What is the best way to limit a textbox to only accept whole numbers and exclude decimal values and alphabets? ...

"Encountering a hiccup with the Firebase service worker in Messaging and Firebase

I am interested in developing a small web application to explore the capabilities of Firebase Cloud Messaging for web apps. My intention is to utilize Firebase Hosting as the hosting platform for my app. ISSUE: Upon allowing the notification pop-up on my ...