Generating a clickable link for a variable within javascript

$scope.msg = "Data Updated Successfully. Item ID: " +  $scope.id;

After successfully updating any data, a message will be displayed as "Data Updated Successfully. Item ID: 13456". I want to turn the ID into a clickable hyperlink. Here is what I have attempted...

$scope.msg = "Data Updated Successfully. Item ID: " + document.write( '<a href="#test_update/' + $scope.id + '" title="Click to view Details" target="details">' + $scope.id + '</a>');

Unfortunately, this code is not working as expected. Any suggestions would be appreciated.

javascriptangularjs

Answer №1

To accomplish this task in AngularJS, you can utilize the power of Strict Contextual Escaping. To do so, make sure to include the $sce service in your controller.

Controller

angular.module('appModule', [])
.controller('MainController', ['$sce',
  function MainController($sce) {
    $scope.message = $sce.trustAsHtml("Update Successful. ID: <a href='#view_update/" + $scope.id + "' title='Click to see Details' target='_self'>" + $scope.id + "</a>");
  }]);

To display this HTML content safely in your template, use the ng-bind-html directive.

HTML

<span ng-bind-html="message"></span>

Answer №2

To simplify things, you can try this approach:

<a ng-href="#test_update/{{id}}">{{id}}</a>

Applying this to your specific scenario:

<span ng-if="id">Update Successful: <a ng-href="#test_update/{{id}}" title='Click for more details' target='details'>{{id}}</a></span>

Refer to the Angularjs documentation for ng-href

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

Collapse the accordion when the search query is less than or equal to 0

I'm having trouble making the accordion open both when the user has typed something into the search bar and when someone clicks to open it. I can get them to work individually, but not together. If I use this code: <accordion-group is-open="statu ...

javascriptangularjs

Organize intricate JavaScript Arrays

Similar Question: How to sort an array of javascript objects? I'm in the process of transitioning some of my older ActionScript 2.0 code to JavaScript. While most things are running smoothly, I've hit a roadblock when trying to numerically s ...

javascript

What is the correct way to invoke a function from a different file?

Having trouble calling a function from another file in my JS code. I am unable to call a function from another js file. I suspect there is an issue with linking the two files. Code snippet from my first JS file const { response } = require('expre ...

javascriptnode.jsmongodbcallbackexpress-generator

The functionality of Node.js's hasOwnProperty method fails to return true even for existing properties

When a user logs into my Node.js Express application using Passport, their user object is saved in the request. Here is an example of what the user object may look like: { "uuid": "caa5cb58-ef92-4de5-a419-ef1478b05dad", "first_name": ...

javascriptnode.jshasownproperty

Ways to display JSON data in Angular 2

My goal is to display a list of JSON data, but I keep encountering an error message ERROR TypeError: Cannot read property 'title' of undefined. Interestingly, the console log shows that the JSON data is being printed. mydata.service.ts import { ...

javascriptjsonangular

Adjust the text area to automatically expand or shrink based on the text it contains

Is there a way to automatically adjust the size of a textarea based on its content? Here is the code I am currently using for this purpose: var element = document.getElementById(event.target.id); var content = $(this).val().trim(); if (content == "") { ...

javascriptjqueryhtmlcss

Retrieve the data stored in a selection of checkbox fields on a form

I have a table of checkboxes: <div> <h1 class="text-center">Select activities</h1> <div class="row"> <div class="col"></div> <div class="col-md-8 col-lg-8"> <h3>Link activ ...

javascriptjquerytwitter-bootstrapcheckbox

Arrange the given data either by ID or Name and present it

Here is the code snippet I am working with: <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <style> .content{ border: 1px solid gray; width: 250px; ...

javascriptjqueryhtml

Unable to render canvas element

Hey guys, I'm trying to display a red ball on the frame using this function but it's not working. I watched a tutorial and followed the steps exactly, but I can't seem to figure out what's wrong. Can someone please help me with this? I ...

javascripthtmlcanvas

Outputting PHP variables in JavaScript is a common practice used to pass

I am struggling to use a variable in my JavaScript code. I have attempted a few methods but none seem to work. The variable I need to include in the JavaScript is option-<?php echo $option['product_option_id']; ?> Below is my current Java ...

phpjavascriptjqueryvariablesecho

Upon selecting multiple checkboxes, corresponding form fields will be displayed based on shared attributes

When multiple checkboxes are selected by the user, corresponding form fields should appear based on the checkboxes. For example, if both flight and hotel checkboxes are checked, then the full name and last name fields should be displayed while other fields ...

javascripthtmlcss

I'm wondering if there is a method for me to get only the count of input fields that have the class "Calctime" and are not empty when this function is executed

Currently, I am developing an airport application that aims to track the time it takes to travel between different airports. In this context, moving from one airport to another is referred to as a Sector, and the duration of time taken for this journey is ...

javascripthtmlcss

Create an AngularJS task manager that saves your to-do list even when the page is refreshed

Currently, I am developing a straightforward to-do list application using AngularJS within an ASP.NET MVC template. Surprisingly, I have successfully integrated Angular and Bootstrap to achieve the desired functionality. The app allows users to add and re ...

javascriptangularjsjsonasp.net-mvclocal-storage

What is the proper way to configure the checklist-model directive in my AngularJS application?

I'm new to the node.js/grunt world, so please bear with me if my question seems basic... I have an angular.js project set up with yeoman/grunt, and now I want to add a directive, specifically this one. However, I'm unsure of how to install it! ...

angularjsnode.jsgruntjsyeomanchecklist-model

What is the best way to retrieve an object from every function?

I'm dealing with a <div> containing radio buttons: <div id='RB-01'> <span>Item_1</span><input type='radio' name='RB01' value='1'><br /> <span>Item_2</span><inp ...

javascriptjquery

Using JavaScript to display content on the screen

As a newcomer to Javascript, I'm looking for a way to display my variable on the webpage without utilizing <span> or innerHTML. var pProductCode = $('[name=pProductCode]').val(); $('input[id*="_IP/PA_N_"]').each(function(i){ ...

javascriptjqueryhtml

Loop through an array of objects, then store each one in MongoDB

If I receive an Array of Objects from a Facebook endpoint, how can I save each Object into my MongoDB? What is the best way to iterate over the returned Array and then store it in my mongoDB? :) The code snippet below shows how I fetch data from the Face ...

javascriptnode.jsmongodbexpresssuperagent

Plugin for Cordova that enables detection of internet connectivity

I'm currently working on my Cordova app which requires an internet connection for certain actions. To monitor the network status, I am utilizing a plugin called https://github.com/apache/cordova-plugin-network-information. The plugin successfully dete ...

androidangularjscordova

What is the most effective method for nesting loops in NodeJS and Mocha?

Currently, I am attempting to create a loop within a loop in my NodeJS code, but I seem to be getting lost along the way. The results are not as expected - sometimes callbacks are triggered twice and so on. My approach involves using the async module. I wo ...

javascriptnode.jsasynchronouscallbackmocha.js

Arrays in Javascript (correlating)

I'm having trouble figuring out what needs to be included in this code (I apologize that it's in German, it's an array corresponding to images for JavaScript.) function namenZuBildern(){ var bilder = new Array( "000227", "000228", " ...

javascriptjqueryarrayshtmlcss