2

In normal JavaScript, you can declare variables like this;

var obj = {};
obj["item-text"] = {};
obj["item text"] = {};

Example given here: http://jsbin.com/petafu/1/edit

And it's perfectly fine. But this doesn't seem to work in angular on the $scope. I attempted to do this and could not really understand why, but cannot find any resources talking about it...

JS

app.controller('ControllerName', function($scope){
   $scope['item text'] = {};
   $scope['item-text'] = {};
});

HTML

<div ng-model="item text"></div>
<div ng-model="item-text"></div>
4
  • I'm not really contesting or upset about the proposed edits to my simple word and capitalization choices, but can I ask the reasoning? Is it because of some sort of standards or search engine compliance? Personal preference? Grammatically irksome? Commented Jul 30, 2014 at 17:27
  • Your examples of "normal JavaScript" do not work Commented Jul 30, 2014 at 17:47
  • Sorry, just forgot a small part of it - I'm a little absentminded today. Commented Jul 30, 2014 at 18:00
  • I didn't write it correctly at first, no. I'm sorry, I just got ahead of myself. But the way I am using variables does indeed work fine; you can see it yourself here: jsbin.com/petafu/1/edit Commented Jul 30, 2014 at 18:02

3 Answers 3

4

If you really want hyphens and spaces I'd probably go with controller as syntax.

View:

<body ng-controller="MainCtrl as ctrl">
  <p>Hello {{ctrl.name}}!</p>
  <input ng-model="ctrl.name1" />
  <input ng-model="ctrl['name-2']" />
  <input ng-model="ctrl['name 3']" />
</body>

Controller:

app.controller('MainCtrl', function($scope) {
  this.name = 'World';
  this['name1'] = "world1";
  this['name-2'] = "world 2";
  this['name 3'] = "world 3";
});

Using your obj variable.

Controller:

var obj = {};
obj["item-text"] = {};
obj["item text"] = {};
$scope.obj = obj;

View:

<body ng-controller="MainCtrl">
  <input ng-model="obj['item text']" />
  <input ng-model="obj['item-text']" />
</body>

http://plnkr.co/edit/OqTN59Ewsc6ydKnjSGbx?p=preview

Sign up to request clarification or add additional context in comments.

7 Comments

Yeah, that works - but why does it work when done on this, but it cannot when done on $scope? Is there something special about $scope?
Okay, so you could do it on $scope, just not quite how you have it. Set $scope.obj = obj as you define it in your question and it should work in the view. I can add another example if that would help.
So I would simply assign $scope.obj = obj and then would put obj['name-2'] = //..assignment..// or obj['name 2'] = //..assignment..//? That does accomplish what I need for this specific use case, but I'm still not clear why it cannot be done to $scope directly. There must be something special about it as an object...
You could get ride of the as. plnkr.co/edit/96Mb2dFz5ETwuONXEshT?p=preview
@Ciel I think a quick read through this will help you clear your doubts.
|
2

$scope in Angular's context is an object. It refers to the application model.

Therefore,

$scope.item_text = 'Hello';

or

$scope['item_text'] = 'Hello';

should both work.

However, please take note of ng-model which can be only used on form elements.

With any of the above declarations,

<input type="text" ng-model="item_text">

will work

1 Comment

So a dash simply cannot exist in a variable name for any reason? It has to be an underscore?
0

Try writing like this

$scope.itemText={};

use should consider using camelcase in javascript as spaces and dashes often causes too many problems

1 Comment

Well. I'm aware of that, but I would still like to understand it. I have some situations where it is needed, such as third party libraries that don't give me control of the names they expect.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.