What is the proper way to display HTML comments using angular brackets? <!-- Would it be {{myModel.myProperty}} -->

Is there a way to display HTML comments that include angular brackets using AngularJS?
It displays as is.

<div data-ng-switch='field.TypeAsString'>
    <label for="{{field.InternalName}}" class="control-label">{{field.Title}}:</label>
    <!-- FieldName="{{field.odata.type}}"
     FieldInternalName="{{field.InternalName}}"
     FieldType="{{field.odata.type}}"
      -->
    <span data-ng-switch-when='Text'>
      <input id="{{field.InternalName}}" class="form-control" data-ng-model="field.value" type='text' />
    </span>
</div>

result

<div data-ng-switch="field.TypeAsString" class="ng-scope">
<label for="Title" class="control-label ng-binding">Title:</label>
<!-- FieldName="{{field.odata.type}}"
 FieldInternalName="{{field.InternalName}}"
 FieldType="{{field.odata.type}}"
  -->

<!-- ngSwitchWhen: Text --><span data-ng-switch-when="Text" class="ng-scope">
    <input id="Title" class="form-control ng-pristine ng-valid ng-empty ng-touched" data-ng-model="field.value" type="text">
</span><!-- end ngSwitchWhen: -->
<!-- ngSwitchWhen: Note -->
<!-- ngSwitchWhen: Number -->
<!-- ngSwitchWhen: Choice -->
<!-- ngSwitchWhen: Lookup -->

javascriptangularjs

Answer №1

The answer that caught my attention: How can I insert an HTML comment with an interpolated expression?

If you want to invoke a directive on a comment, the syntax is as follows:

<!-- directive: foo expression -->
I initially thought ng-bind supported comments, but it turned out it doesn't. You can create your own easily though:

app.directive('comment', function($interpolate) {
  return {
    restrict: 'M',
    scope: true,
    link: function(scope, element, attrs) {
      var comment = $interpolate(attrs.comment)(scope);
      element.replaceWith("<!-- " + comment + "-->" );
    }
  };
});
To use it:

<!-- directive: comment "something something {{item.id}}" -->

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

"Successfully making AJAX calls on localhost, but encountering issues when trying to make them online

Whenever a visitor navigates to a specific page (referred to as page1), the PHP script is initiated to load the HTML content for an array that contains data about the users. After the page has finished loading (DOM ready), I utilize jQuery to make an AJAX ...

javascriptphpjqueryajax

Tips for incorporating strikethrough into a drop-down select box in a jquery datatable and implementing filtering based on it

In this scenario, I am currently utilizing a jQuery Datatable with strikethrough text. My aim is to make the filterable dropdown display the same strikethrough text; however, it is not displaying properly at the moment. Below is my jQuery datatable setup: ...

javascriptjquery

Using JQuery to gather form (excluding html form) information and transfer it to a different destination

Forgive my lack of expertise in this matter. We operate a website with a straightforward slide-in form that appears when clicked by the user. This form is used to request a phone call back from us, and collects the user's name, email, phone number, a ...

javascriptphpjqueryhtmlforms

Prioritize checked checkboxes at the top of the list

When a radio button is clicked, an Ajax request is triggered and the Div containing checkboxes for employees is retrieved. I am hoping to have the selected checkboxes displayed at the top. I am considering the possibility of using a dynamic index attribut ...

javascriptjqueryhtmlajax

Do global variables in a node.js server apply across the entire server or exclusively to individual sessions or users?

I have a question that may seem basic, so I apologize in advance - are global variables in node.js applicable server-wide or is their scope limited to the session or user? For example, if I create a global boolean variable in a routes.js file to track whet ...

javascriptnode.jsexpress

Why is the onclick function for anchor tags not functioning in selenium?

My javascript onclick function looks like this: <a href="#" id="download" onclick="Exceldownload('sites')"> <i class="fa fa-download card-down-icon" aria-hidden="true"></i> </a> In my selenium script, I have added th ...

javascriptseleniumselenium-webdriverautomated-testsselenium-chromedriver

Display a text message from the backend code to open a fresh page or pop-up window

Imagine a situation where there is a string variable in the code behind that holds HTML content like this: Dim htmlString As String = "<h3>hello</h3><p>some paragraph</p><table><tr><td>some table content</td> ...

javascripthtmlasp.netvb.net

What is the best way to exchange a variable in JavaScript with the output of AngularJS?

I implemented the search suggestion feature using HTML and JavaScript. In the app.js (Angular), I used $http.get to retrieve JSON data from a URL and stored it in $scope.JSONresult. Now, I want to update the list in HTML: ['b0','b12' ...

javascriptjqueryangularjsjson

After implementing global navigation guards in Vue-router, an unexpected error message stating "Uncaught TypeError: Cannot read property 'matched' of undefined" is being thrown

After successfully navigating the login process and implementing user-role-based routing, I proceeded to set up authentication guards for different URLs. Though it initially seemed straightforward, I encountered an error that I haven't been able to t ...

javascriptvue.jsroutesvue-router

Adjusting the focal point of a brochure on open street map

I am currently working on initializing a map in an Angular application using leaflet with openstreetmaps. I have set the center of the map so that it is displayed to the user when they open the site. However, I am now trying to figure out how to dynamica ...

javascriptangularleafletopenstreetmap

Using the v-for directive in Vue.js 2 with a transition-group

I am working with a projects object that I populate after making an axios call. Then, I am using a v-for directive to loop through the projects object. Here is the code snippet: <ul class="row projects-list"> <li v-for="project in projects" ...

javascriptvue.js

Guide to stripping HTTP headers from a REST API request using JavaScript

Hey there! I'm currently working on extracting a specific part of the response from the {}. This information is retrieved from the gemini public database, and my goal is to retrieve only the content within the curly braces and store it as a string in ...

javascriptjsonapirestget

Issue with Firefox browser: Arrow keys do not function properly for input tags in Twitter Bootstrap drop down menu

Requirement I need to include a login form inside the dropdown menu with username and password fields. Everything is working fine, except for one issue: Issue When typing, I am unable to use the arrow keys (up/down) in Firefox. This functionality works ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

Setting up ngModel with information - AngularJS Bootstrap bs-select

Currently, I am managing a website that enables users to create profiles and share activities via a feed. To organize all the created profiles, I have integrated ng-grid into the system. Additionally, I have implemented two buttons that allow users to eith ...

angularjsangular-bootstrap

Why isn't any of my AngularJS code running as expected?

I've recently started learning AngularJS, but I'm encountering an issue where none of my code is being executed when I run the page. Instead, all I see on the website is {{angular-message}} and I'm receiving the error "Error: [ng:areq] Argum ...

javascriptangularjsweb

Access arrays/objects within main object using JavaScript's Object.keys()方法

Perhaps the title is a bit confusing, but I couldn't come up with a better way to phrase it. I have a function that determines the value of each property within a contact object and returns 'No Data' if the value is null/empty/undefined. Ho ...

javascriptarraysjsonobject

Display Image based on AngularJS value

Within my data, there exists a value {{catadata2.EndorsementList['0'].Rating}}. This value can be either 3, 4, or 5. Based on this value, I am looking to display the image <img src="/assets/img/rating.png" /> a certain number of times. For ...

javascriptphpangularjsangularjs-ng-repeat

Is it possible to duplicate a response before making changes to its contents?

Imagine we are developing a response interceptor for an Angular 4 application using the HttpClient: export class MyInterceptor implements HttpInterceptor { public intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<an ...

javascriptangulartypescript

What is the best way to include a component within a content-editable div in Vue.js?

Looking for the correct way to add a div inside a content-editable div on a click of a button in vue js. Here's the code I have been experimenting with: var ComponentClass = Vue.extend(AddTag) var instance = new ComponentClass({ propsData: { type: ...

javascripthtmlvue.jsappendcontenteditable

Exploring the versatility of combining ng-models in AngularJS

I have a textarea that is linked to the 'wordset' ng-model and has an ng-change="onChange()" <div> <textarea ng-model="wordset" ng-change="onChange()" class="form-control app-word-set" placeholder="Enter ...

angularjsangularjs-ng-model