Showing attributes starting with '$' in AngularJS

Is there a way to display object properties and their values in AngularJS without the issue of property names starting with '$'? I don't want to modify the source data just to make Angular happy. Here is an example that showcases the problem:

<p data-ng-repeat="(key, value) in {'$no': 'rock', 'yes': 'hard place'}">
      {{ key }}: {{ value }}
  </p>

The code above only shows the second item.

Interestingly, you can make Angular show these properties by directly specifying the property name like this:

{{ my_object.$no }}

As a newcomer to Angular, I'm wondering if there's a filter or something else I need to use to display these properties?

Note: This is on the latest version of AngularJS, 1.2.14.

Update

I raised an issue with the angular development team on Github:

https://github.com/angular/angular.js/issues/6520

However, it didn't provide any new insights and was closed as "Works as expected" :(

Therefore, @Gruff Bunny's answer below may be the best approach for now.

javascriptangularjs

Answer №1

In Angular, the $ sign is used as a prefix for its own properties, causing the ngRepeat directive to overlook object properties starting with $.

Below is the code snippet demonstrating iteration over an object in Angular:

collectionKeys = [];
for (key in collection) {
    if (collection.hasOwnProperty(key) && key.charAt(0) != '$') {
        collectionKeys.push(key);
    }
}

An alternative solution would be converting the object into an array and utilizing it in the UI:

angular.forEach($scope.obj, function(value, key){
    $scope.arr.push({ key: key, value: value });
});

<p data-ng-repeat="obj in arr">{{ obj.key }}: {{ obj.value }}</p>

Fiddle

Answer №2

When using ng-repeat directive in AngularJS, any key prefixed with a "$" sign will be ignored:

 $scope.$watchCollection(rhs, function ngRepeatAction(collection){   
    ........

           collectionKeys = [];
           for (key in collection) {
              if (collection.hasOwnProperty(key) && key.charAt(0) != '$') {
                collectionKeys.push(key);
              }
            }
    ........

});

Line number where this code is located in Angular.js: 19598

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

Click to remove the parsed element

I'm working on a project with a parsed xml-file containing duplicate elements. I need to create a button that hides one of them when clicked using an onclick statement. Can someone help me achieve this? <!DOCTYPE html> <html> <body&g ...

javascriptajax

A guide on sorting JSON data with Javascript/jquery

I have a set of JSON data: {"X1":"3","X2":"34","Y1":"23","Y2":"23","Z1":"234","Z2":"43",...} My goal is to rearrange and group this data as follows: var newDataJson1 = { "X":{"X1":"3","X2":34}, "Y":{"Y1":"23","Y2":"23"}, ... } ALSO, I want to stru ...

javascriptjqueryjsongrouping

asyncValidation that relies on the value of another field

I am working on adding a validation field to one of my inputs that will require the server to verify if the VAT number provided is valid. To achieve this, I have implemented an async validator in my code as shown below: myApp.factory('isValidVat&ap ...

angularjsvalidation

Is it necessary to invoke the function before utilizing the template in an Angular directive?

I'm having trouble calling a function and passing it one of the scope variables listed below. The error message I keep getting is: ReferenceError: activityLog is not defined I'm unsure if what I'm attempting to do here is feasible. The f ...

angularjs

Trouble getting proper alignment displayed with JavaScript and CSS

If anyone has a solution for printing content in a div using JavaScript and CSS, please help. The main div with the id 'preview' contains content taken from a database using PHP and MySQL. However, the data on the print page appears vertically an ...

javascriptphpcss

Variables in a for loop can be given unique and descriptive names

I am exploring the world of JS and HTML as a newcomer. I recently discovered that variables can be dynamically named in code. Excited to try it out, I implemented some basic variable naming code. However, to my disappointment, nothing is being displayed on ...

javascriptjqueryhtmlfor-loop

Initiate an ajax request only when there are pre-existing ajax requests in the queue

Setting up the Form I've created a form that utilizes checkboxes to determine a selected number on a page: https://i.sstatic.net/BNQB0.png When a checkbox is selected, it triggers a call to a controller that saves the selection and returns the upda ...

javascriptjqueryajaxasp.net-mvcfetch

Building a dynamic URL in ReactJS from scratch

const selectedFilters = { category: "", mealtype: "lunch", cuisinetype: "Italian", dishType: "Pasta" } const apiUrl = `https://api.edamam.com/api/recipes/v2?type=public&q=${query}&app_id=${app_id}&app_key=${app_key}`; User ...

javascriptreactjsurlreact-routerreact-router-dom

Is tsconfig.json Utilized by Gatsby When Using Typescript?

Many blog posts and the example on Gatsby JS's website demonstrate the use of a tsconfig.json file alongside the gatsby-plugin-typescript for TypeScript support in Gatsby. However, it seems like the tsconfig.json file is not actually utilized for conf ...

javascripttypescriptbabeljsgatsbytsconfig

Retain the selected choices made by the user on the form using Material UI in React

Seeking the most efficient method to cache a user's checkbox choices with material UI in a browser/react environment. I am inclined to utilize temporary storage within the browser as the selections only need to be retained if the user leaves the form ...

javascriptreactjscachingbrowsermaterial-ui

Automatically adjust the size of embedded video streams within DIV elements

My application is quite simple, it displays four video streams in a quadrant layout. Users can double click on each video to switch to full-screen mode and then again to go back to the quadrant view, which all works perfectly. The issue I'm facing in ...

javascriptjqueryhtmlcssvlc

There seems to be an issue with the functionality of flatlist and scrollView

I am new to working with react-native. I have a screen where I am using four flatlists, but the last flatlist at the bottom of the screen is not scrolling. I added a scrollView and it worked fine, but now I am getting this error message: VirtualizedLists ...

javascriptreactjsreact-nativescrollviewreact-native-flatlist

JavaScript code to enforce a 100% page zoom setting

After developing a small game in Canvas, I encountered an issue. Some users with their default zoom level set to something other than 100% are unable to view the entire game page. I attempted to resolve this by using the following CSS: zoom: 100%; This ...

javascripthtmlbrowserzooming

Did you manage to discover a foolproof method for the `filesystem:` URL protocol?

The article on hacks.mozilla.com discussing the FileSystem API highlights an interesting capability not previously mentioned. The specification introduces a new filesystem: URL scheme, enabling the loading of file contents stored using the FileSystem API. ...

javascriptfilesystemsw3chtml5-filesystem

What is the best way to organize the password reset process for Firebase authentication?

Exploring the possibilities with the Firebase authentication solution for user registration and login in my Ionic application has led me to a hurdle in implementing the 'password reset flow'. When a user forgets their password, the current flow ...

javascriptangularjsfirebaseionic-framework

What is the best way to invoke a component method from an event listener of a different component using ($on)?

I recently came across information on Non-Parent-Child Communication at https://v2.vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication, which explains the concept of using bus events to communicate between components. However, I'm still ...

javascriptvue.jsvuejs2vue-component

What are some ways to effectively utilize a mask for values retrieved from a database?

Hello, I am working on fetching data from my database and want to display it in a specific format within my view. Currently, my code is simple with a table displaying the data from the database. However, I need to format a phone number with a mask like thi ...

javascriptlaravelbootstrap-4

New sorting option added for main page collection

I have a website that displays Question objects using <div> elements. I want to allow users to choose the order in which these items are displayed, but I'm having trouble implementing this feature. My initial approach was to use a <select> ...

javascripthtmlasp.net-mvcaction

How is it that the sum of 2 and  40 equals to 42?

My mind was completely blown when my coworker showed me this JavaScript code that alerts 42. alert(2+ 40); I soon discovered that the seemingly negative sign is actually a mysterious Unicode character with unique functions. This discovery led me to ...

javascriptunicode

Angular 9 causing issues with Bootstrap accordion functionality

I'm currently working on a project with Angular 9. I have installed Bootstrap and jQuery, and the entries in my package.json look like this: "bootstrap": "^4.4.1", "jquery": "^3.5.0", I have imported the CSS and JS files in angular.json as ...

javascriptangularbootstrap-4