0

All:

Say if I have a template like:

<input ng-repeat="d in data track by $index" ng-class="parent{{$index}}" />

And it rendered as

<input ng-repeat="d in data track by $index" ng-class="parent0" class="ng-pristine ng-untouched ng-valid ng-scope">

But when I use $(".parent0"), nothing being selected.

So I wonder how can I select element specify by ng-class?

Thanks

Kuan
  • 11,149
  • 23
  • 93
  • 201
  • Why do you want to select it? – tymeJV Jan 21 '16 at 21:55
  • Where in code do you use jquery? – Artem Jan 21 '16 at 21:55
  • @tymeJV Thanks, I actually want to use angular.element to get the scope which that element is within, the param of angular.element is a jqlite object, which I want to use $(".parent0") to build – Kuan Jan 21 '16 at 22:01
  • @Artem Thanks, I am using it in console right now. – Kuan Jan 21 '16 at 22:01
  • if you notice, "parent0" is not being added as a class – Vale H Jan 21 '16 at 22:02
  • try this $("[ng-class='parent0']") – Baximilian Jan 21 '16 at 22:02
  • @AndrewH Thanks, I notice that, could you help with why it behaves like this? – Kuan Jan 21 '16 at 22:03
  • ng-class expects an expression. if 'parent0' isn't a scope variable, no class is added – Vale H Jan 21 '16 at 22:04
  • 1
    It should be being added to the class.. you're just not using it correctly. You dont need `ngClass` for this scenario. Use regular `class` – tymeJV Jan 21 '16 at 22:04
  • sounds like an XY problem . Shouldn't need jQuery to access the scope in the first place Suggest reading [thinking-in-angularjs-if-i-have-a-jquery-background](http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background) – charlietfl Jan 21 '16 at 22:22

2 Answers2

3

Expression should return a string:

ng-class="'parent{{$index}}'"

Using first point:

The directive operates in three different ways, depending on which of three types the expression evaluates to:

  1. If the expression evaluates to a string, the string should be one or more space-delimited class names.

  2. If the expression evaluates to an object, then for each key-value pair of the object with a truthy value the corresponding key is used as a class name.

  3. If the expression evaluates to an array, each element of the array should either be a string as in type 1 or an object as in type 2. This means that you can mix strings and objects together in an array to give you more control over what CSS classes appear. See the code below for an example of this.

Docs

Plunk

Artem
  • 823
  • 8
  • 14
  • Thanks, could you give me a little explanation why this work with single quote? – Kuan Jan 21 '16 at 22:10
  • @Aetem Thanks, one question about "Expression": is the string with single quote together called expression or the string inside single quote itself called expression, or the whole thing with single and double quote called expression? What is the difference among ng-class={{"parent"}}, ng-class="{{parent}}" ng-class=' " {{parent}} " ' and ng-class=' {{"parent"}} ' – Kuan Jan 21 '16 at 22:35
  • ng-class is just a html attribute with value inside double quotes, this value should be a valid angular [expression](https://docs.angularjs.org/guide/expression), which can return 3 options described above, check changed [version](http://plnkr.co/edit/W51I2lN24W1wP0l02orJ?p=preview) – Artem Jan 21 '16 at 22:46
  • thanks, still very confused, could you help with why ng-class='{{"parent"+ $index }}' not works neither? I also tried ng-class=" ' {{ "parent"+$index}} ' ", angular gives me error – Kuan Jan 21 '16 at 22:50
  • First expression is not a string, second expression can not be parsed by angular, change one pair of quotes to fix: `"'{{'parent'+$index}}'"` or simpify it to `"'parent'+$index"` – Artem Jan 22 '16 at 21:10
1

you should put the expression into single quotes like ng-class="'parent{{$index}}'"

KikinRdz
  • 23
  • 5
  • Thanks, one question about "Expression": is the string with double quote together called expression or the string itself called expression? What is the difference among ng-class={{"parent"}}, ng-class="{{parent}}" ng-class=' " {{parent}} " ' and ng-class=' {{"parent"}} ' – Kuan Jan 21 '16 at 22:31
  • From the angularJS Documentation Usage as attribute: ... – KikinRdz Jan 21 '16 at 22:36
  • In other words "expression" is the part of code between double quotes, the part what is on right from the equal sign – KikinRdz Jan 21 '16 at 22:39
  • so in your answer, the expression should be parent{{$index}} with double quote, right? Could you give a little explanation about how angular evaluate each cases in my question above? Like ng-class={{"parent"}}, ng-class="{{parent}}" ng-class=' " {{parent}} " ' and ng-class=' {{"parent"}} ' – Kuan Jan 21 '16 at 22:44
  • First AngularJS use double brackets for variable injection into the DOM, so with this in mind; ng-class={{"parent"}} is an incorrect sentence. About your question; when you want to assign a class name depends of a scope variable you need to use a sentence like ng-class={ 'myClass' : myVar==value} In this case angular evaluates the sentence (in human language) like: If myVar = value then add to this element the class myClass But in your case, you just want to put the class directly, for this reason the brackets {} are unnecessary – KikinRdz Jan 21 '16 at 23:05
  • Sometimes is just an single expression like your case, just the css class name; in other cases is a conditional expression, angularJS evaluates and depends its result assigned a class name – KikinRdz Jan 21 '16 at 23:05