3

Is it possible to bind to a property in angular using the square bracket notation of accessing properties. For example (using pseudo-code).

<script type="text/javascript">
    var object = { };
    object["my property"] = 3;
</script>
<input ng-model="object['my property']" />

I know square bracket notation is supported, but there doesn't seem to be a way to bind to a property that has a space in it.

While this is just pseudo code, the specific error we receive in angular is : "Uncaught Error: Syntax error, unrecognized expression: select[ng-model='ticket.Properties['assigned to']']".

Edit: Figured out the solution. Using single quotes on the outside and double quotes on the inside:

<input ng-mode='myObject["my property"]' />
Travis Houk
  • 31
  • 1
  • 3

1 Answers1

2

This is absolutely possible, see the snippet here I created.

I just moved the initialization code into a controller.

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.object = {};
  $scope.object['my property'] = 3;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="myCtrl">
    <input ng-model="object['my property']" />
    <pre>{{object|json}}</pre>
  </div>
</div>
Brocco
  • 62,737
  • 12
  • 70
  • 76
  • Our set up is similar to this however the error we're receiving is "Uncaught Error: Syntax error, unrecognized expression: select[ng-model='ticket.Properties['assigned to']']" and in our JS we have $scope.ticket = { Properties: {}}; $scope.ticket.Properties["assigned to"] = ""; – Travis Houk Nov 11 '14 at 13:49