choose an item from the route parameters in Angular

In the process of developing an Angular application, I have created a basic CMS-style app. Initially, I managed to navigate to pages without deep linking using the following code snippet:

 <li ng-repeat="page in pages"><a href="#" ng-click="select(page)">{{page.linktext}}</a></li>

The corresponding controller function looked like this:

$scope.select = function(selected){
    $scope.currentPage = selected;
};

After implementing deep linking into my app, the HTML now looks like this:

<li ng-repeat="page in pages"><a href="#/pages/{{page.linktext}}">{{page.linktext}}</a></li>

A route provider is used to capture the pageId from the URL.

In the controller, I am now using:

$scope.currentPage = $routeParams.pageId;

It has become evident that setting currentPage to the id and not the object is causing issues. How can I select the object associated with that pageId?

I have included a link to a jsfiddle for reference: http://jsfiddle.net/cLNmS/

Answer №1

$scope.current = $scope.pages.filter(function (item) { 
     return item.linktext === $routeParams.pageId; 
})[0];

Next, validate $scope.current to ensure that a valid URL was provided.

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

UI Select not found result event

Currently implementing https://github.com/angular-ui/ui-select and looking for a solution to trigger an event (such as opening a modal) when no results are found while using a filter. <ui-select ng-model="SelectedCustomer.selected" theme="select2"> ...

I'm looking for an easy way to generate a special effect when my mouse interacts with a div using HTML, CSS, or JavaScript

I'm attempting to replicate this interesting effect where a div is surrounded by a container when the mouse hovers over it. It looks pretty cool, like in this image here: https://i.stack.imgur.com/p0epq.png Does anyone have any suggestions on how I ...

A JavaScript async function with a nested call inside

Below is my node function for the API server: router.post('/find', async (req, res) => { try { const firewalls = []; let count = 0; const devices = await Device.find({ ...req.body }); devices.forEach(async (item) => { ...

The challenge of orphaned ng-transclude elements in AngularJS

I've encountered an issue with ng-transclude orphan problem, which led me to refer to this link: https://docs.angularjs.org/error/ngTransclude/orphan?p0=%3Cng-transclude%3E This problem arose when attempting to integrate a tab directive from thinkste ...

Exploring the analysis of JavaScript and CSS coverage throughout various pages or websites

The Chrome Dev Tools JavaScript and CSS Coverage Drawer is quite impressive, but there is one thing that could make it even better. It would be great if it could remain active without restarting its analysis every time you visit a new page. I wish I could ...

Trigger a click event on a third-party webpage that is embedded within an Angular application

In the process of developing my angular application, I found a need to incorporate a graph visualization tool. To achieve this, I utilized the HTML <embed> tag and successfully integrated the graph into my application. Now, my objective is to enable ...

Utilizing AngularJS in conjunction with Asp: UpdatePanel

<%@ Page Title="" Language="C#" MasterPageFile="~/Admin/AdminMasterpage.master" AutoEventWireup="true" CodeBehind="ExamSet.aspx.cs" Inherits="demo.Admin.ExamSet" %> <asp:Content ID="Content1" ContentPlaceHolderID="content" runat="server"> <s ...

Is there a way to cancel a subscription in Stripe using React?

I'm currently working with React and I need to remove an old subscription when a user changes their plan. Here is the code snippet I am using: import {loadStripe, useStripe} from '@stripe/stripe-js' const loadCheckout = async (priceId) => ...

experiencing a fault in the Magento platform

Every time I visit my website, I am faced with the following issue (I retrieved this error file from the var folder): a:5:{i:0;s:88:\"Cannot send headers; headers already sent in /home/eyewear/public_html/index.php, line 1\";i:1;s:943:\"# ...

Refresh my EJS template dynamically following an AJAX call to Node.js without the need to reload the entire page

After implementing a shopping cart with a quantity field and a plus button for users to increase the quantity, I needed a way to update the DOM dynamically without reloading the entire page. This led me to discover AJAX requests recently, and I was able ...

Looking to incorporate three additional fields by clicking on the "add more" button

I am currently working on a PHP and Bootstrap script designed to collect website addresses. Initially, there is a single field that gathers website names linked to "address1" in the MySQL database. I have expanded the database to include two additional fie ...

Encountering a Cannot GET error when using Express routing with parameters:

I've encountered a "Cannot GET" error while attempting to use express routing with parameters for the first time, and I'm puzzled as to why. Everything was working smoothly until I installed lodash, and now nothing seems to work anymore. Here&a ...

Is the XMLHttpRequest object closed once the response is received?

Attempting to establish a connection with the server using an XMLHttpRequest object to send data intermittently. The process of creating the object and establishing a connection is as follows: var xhr = new XMLHttpRequest(); xhr.open("post", location, tru ...

Something is wrong with the swipe feature, it's not working properly

I've been struggling to add next/prev buttons to my swiper using jQuery instead of Zepto. I've tried various methods but nothing seems to be working. Can anyone help me figure out why it's not functioning properly? This is the code snippet ...

Learn the process of creating an amchart pie chart with dynamic JSON data

I receive JSON data: {"Excellent":"5","NeedsImprovement":"14","Average":"9"} What is the best way to represent this data using an AmCharts Pie chart or donut chart with AngularJS? ...

javascript utilize bluebird promise to asynchronously retrieve the first file from a given list

I am currently working on implementing promises in JavaScript to retrieve the first available file from a list of paths (for example, ["c:\\temp\\test1.json", "c:\\temp\\test2.json"]). The goal is to identify and ret ...

Validate input JQuery only when specific radio buttons are chosen

My form currently has basic validation set up like this: <script type="text/javascript"> $(function() { $("#postform").validate({ rules: { ...

Changing z-coordinate from perspective to orthographic camera in three.js

In my project, I am trying to blend perspective objects (which appear smaller as they move farther away) with orthographic objects (which maintain the same size regardless of distance). The perspective objects are a part of the rendered "world," while the ...

Unveiling the Magic: Enhancing Raphaeljs with Interactive Click Events on a Delicious Slice of the

I'm having trouble responding to a click event on each slice of a Raphael Pie Chart. I've tried implementing the code below, but it doesn't seem to be working. The code is just two lines, commented as "My Code", in the example from the offic ...

next.js will display a "not-found.tsx" page if the image path is invalid

Can anyone help me with this issue I'm facing in my Next.js project? I have a page where an image from the public folder is displayed using app router. But if I go directly to the URL of the image and purposely mess up the path, Next.js shows the not- ...