Using ng-repeat in conjunction with ui-router conditions

Utilizing ui router ($routeprovider and $locationprovider) for angular js, I am looking to adjust the array being looped through in an ng-repeat based on the current url/route. Despite browsing similar threads on stack, I have not found a precise solution to my issue.

The following are my routes:

   .when('/limited', {
          template: '<di-home></di-home>',
          activeTab: 'home',
          caseInsensitiveMatch: true,
      })

   .when('/all', {
          template: '<di-home></di-home>',
          activeTab: 'home',
          caseInsensitiveMatch: true,
      })

When the URL changes, I aim to switch the ng-repeat statement from "things in Ctrl.data.all" to "things in Ctrl.data.limited" using some form of conditional logic.

<md-card class="md-whiteframe-4dp" ng-repeat="things in Ctrl.data.all" flex-xs="100" flex-sm="100" flex-md="45" flex-gt-md="30"></md-card>

What approach would be most effective for achieving this? Any guidance or reference to a relevant post would be greatly appreciated! Thanks!

javascriptangularjsurlangular-ui-routerangularjs-ng-repeat

Answer №1

Avoid handling this in your view, as it should be managed by your controller. Keep the view clean and simple:

<md-card ng-repeat="item in itemsToDisplay"></md-card>

Then, in the controller, determine the data to display based on the URL:

if($location.path() === '/limited') {
    $scope.itemsToDisplay = $scope.data.limited;
} else if($location.path() === '/all') {
    $scope.itemsToDisplay = $scope.data.all;
}

Note: Remember to inject $location into your controller.

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

When utilizing the ng-strict-di directive in AngularJS 1.3 with the ngbp framework, the application fails to load properly on the Chrome browser

I am currently developing a web application with AngularJS using the ngbp framework, previously known as ng-boilerplate. The default version of AngularJS in this framework is 1.2, but we are considering switching to 1.3 due to some appealing features it of ...

angularjsgoogle-chromengboilerplate

Could you share the most effective method for implementing a live search feature using javascript or jquery?

While attempting to create a live search for a dataset containing over 10,000 rows, I specified the DOM structure that is available. Despite my efforts to check each result after a single input during the live search process, my browser keeps hanging. Is t ...

javascriptjquerydomsearchlivesearch

stream a song with a font awesome symbol

Can an audio track be played using a font awesome icon, such as displaying the song name (mp3) with a play icon right next to it? When users click on the play icon, can the track start playing and be paused or stopped at will? The list will consist of app ...

javascripthtmlfont-awesomemp3

When running Rollup, a syntax error occurs due to the use of the "import" syntax in an internal Rollup file using Javascript

I am working on a nodeJS/express application with a rollup bundler. My rollup configuration file defines a command in the package.json like this: "build": "env ROLLUP_OPTIONS='prod' rollup --config configs/rollup.config.js". However, when I run " ...

javascriptnpmecmascript-6rollup

It is my goal to populate the array with numbers while avoiding any duplicate entries

I am currently facing an issue with my code as it is returning a length of 0 instead of the expected result of 5 after excluding duplicates from the array. I have a feeling that there might be something missing in my code, but I just can't seem to fig ...

javascriptarrays

AngularFire-seed: Exploring the Effects of Function Arguments

Within the AngularFire-seed, a process unfolds in the run-definition: $rootScope.auth = loginService.init('/login'); Next, in the loginService-definition: init: function() { return auth = $firebaseSimpleLogin(firebaseRef()); }, The firebase ...

angularjsfirebaseangularfire

Encountering an error with Gatsby while running the development environment due to issues with antd and less configuration (NPM

Encountering issues with the development server in local after installing antd, less, less-loader, gatsby-plugin-less, and gatsby-plugin-antd Versions: "gatsby-plugin-less": "^6.20.0", "less": "^2.7.1", "less- ...

javascriptnode.jslessgatsbyantd

Debounce fails to honor the specified timeout period

I'm currently working on implementing a debounce function to handle an HTTP request function. The code is very similar to the example provided below, with only minor changes in function names. To start off, here's the debounce function I am usin ...

javascriptreactjsdebouncing

Displaying tooltips dynamically for newly added elements all sharing a common class in React

I'm facing an issue with the primereact tooltip component from . Everything seems to be working fine except for the target property. When I have multiple elements on a page with the same class, the tooltip works as expected. However, when I add a new ...

javascriptreactjstooltipdynamically-generatedprimereact

While utilizing Ajax with Spring, it is possible to send a JavaScript object and receive it as a custom object. However, there was an issue with

One of my challenges in Java is working with a custom class that looks like this: public class AddressesVO { private Long addressId; private String address; public Long getAddressId() { return addressId; } public void setAddressId(Long addressId ...

javascriptajaxspringjspspring-mvc

Switch between display modes using a button and CSS media query

I'm trying to find the most effective method for toggling display states on a webpage using a button while also being able to adjust based on screen size. For larger screens, I want to default to a horizontal layout with the option to switch to vertic ...

javascriptjqueryhtmlcss

Strategies for redirecting search queries when adding a new path

Issue I am facing a challenge with pushing a new path to the URI while maintaining existing search queries. For example: Current URL: https://example.com/foo?bar=123&foobar=123 When I use history.push('newPath'), I end up with https://exa ...

javascriptreactjstypescriptreact-router-dom

Having difficulty adding a custom library from a repository into an Ember project as a dependency

I've been working on a WebGL library that I want to include as a dependency in an EmberJS project. It seems like I should be able to do this directly from the repository without creating an npm package, but I'm running into some issues. To illus ...

javascriptnode.jsember.jsnpm

removing functionality across various inputs

I have a JavaScript function that deletes the last digit in an input field. It works fine with one input, but not with another. It only erases the digit in the first input. <script> function deleteDigit(){ var inputString=docu ...

javascripthtml

Is JavaScript not having an impact on your HTML code?

I am attempting to create a dynamic number change when the user interacts with the "range-slider" element, but the number is not updating as expected. Below is the code I have written: var rangeSlider = function() { var slider = $(".range-slider"), ...

javascripthtml

Has Angular been assimilated into the window object by webpack?

I'm encountering a puzzling issue with webpack that I can't seem to resolve. Here is the link to my webpack.config file: https://github.com/saike/maluvich-browser/blob/master/webpack.config.babel.js In my project, I import angular using ES6 mo ...

javascriptangularjswebpack

Prevent the submission of the form if the textfield does not contain any

Is there a way to prevent form submission when a textfield is empty? Currently, my script allows for new empty records to be inserted into the database even when the textfield is empty. $(document).ready(function(){ $("#form1").on('submit', ...

javascriptjqueryajax

Transfer responsibilities of events to the canvas and then fetch the Element in the handler

Currently, I am utilizing the Raphaël library to create a network graph, where nodes are depicted as circles. Users have the ability to dynamically add nodes by clicking on the canvas. When a new node is added, an Element object is pushed into both a Set ...

javascriptjqueryhtmlsvgraphael

JavaScript Magic: Hide Div when Clicking Away

I need a solution where clicking outside of the My DIV with the ID Container_ID will hide all elements within the Container by setting their style to display: none;. Currently, the JavaScript code I am using partially achieves this functionality, but it al ...

javascriptcss

Enabling onClick based on conditions

I'm struggling to disable a Link onClick when a certain condition is not met. Attempted to move the logic outside of render using a function, but the button always ends up disabled. Tried CSS to disable click, only to realize that tab and enter can ...

javascriptreactjs