Display object properties with '$' as first character

[whitews]

Object properties beginning with a '$' character are not displayed in templates using the ng-repeat directive. A small example exhibiting the problem:

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

Oddly, you can display these properties explicitly:

{{ my_object.$no }}

As far as I know, these are valid JS property names, so I'm not sure why these would not be allowed, especially considering the inconsistent behaviour of explicitly referencing these properties.

This was also posted on StackOverflow:
http://stackoverflow.com/questions/22134008/angularjs-display-properties-with-as-first-character

[gsklee]

@whitews You should avoid adding any property beginning with $ because this is preserved for Angular's inner workings; see http://docs.angularjs.org/api/ng/function/angular.toJson for more information.

[whitews]

I agree, but this came up in consuming server side data where some keys contain "$" chars. I've worked around it using explicit key / value scheme: { key: some_key, value: some_value }. Perhaps if cases like this cannot be handled, it could be mentioned in the documentation (or perhaps it already is, and I missed it :)

[quantizor]

@whitews If they're not too deep, I'd just walk through the object and repackage those keys for now.

[whitews]

@3lux Can you describe what you mean by repackage? different from what I described in the previous comment? If you mean removing the '$' prefix, that's not an option in my case as the presence of the symbol has meaning and I'd rather not modify the 'source' data.

I guess to me, this seems more bug-ish due to the inconsistency of being able to access the property in some cases and not in others (my_object.$no vs the key in ng-repeat).

[quantizor]

@whitews Renaming them is what I meant, yes. If you want them to be virtually corrected but not change the source object, you can use a filter like this:

app.filter('reMapIllegals', function(){

  return function( obj ){

    var filteredObj = {};

    angular.forEach(obj, function(item, key){
     if(key.indexOf('$') !== -1) filteredObj[key.replace('$', '_')] = item;
     else filteredObj[key] = item;
    });

    return filteredObj;
  };

});

Use like this: ng-repeat="(key, value) in { '$no': 'rock', 'yes': 'hard place' } | reMapIllegals"

[btford]

Thanks for filing this issue, @whitews.

Besides the suggestions above you can also use HTTP response interceptors.

I realize that this may be inconvenient for your particular use case that this isn't allowed out of the box, but there are plenty of ways to make this work without too much hassle.

Closing this.