ng-class on ui-select

[larserikelander]

Cannot put ng-class on element ui-select

[vladipus]

Syntax Error: Token '{' is an unexpected token?

[danfuterman]

Also experiencing this issue using ui-select multiple, tested with angular 1.3.2 & 1.3.4, and angular-ui-select 0.8.3 & 0.8.4:

Example select:

<ui-select 
   multiple 
   ng-model="something.ids" 
   theme="bootstrap"
   ng-class="some-class"
>

The console error on loading the page:

Error: [$parse:syntax] Syntax Error: 
Token '{' is an unexpected token at column 12 of the expression 
[some-class {open: $select.open}] starting at [{open: $select.open}].

[aeife]

Same error here.

[surabhi-batra]

Same here, did anybody manage to resolve it?

[surabhi-batra]

Just add a semicolon after your custom ng-class. This will take care of the error.
Example: ng-class="some-class;"

[gerardp]

I have the same error, adding a semicolon doesn't solve the problem (version 0.8.4)

[Magador]

The problem is because <ui-select> templates use ng-class="{open: $select.open}".
Ultimately, in the final HTML, the ng-class attribute has a value of:
ng-class="{class: expression} {open: $select.open}"

[grantfeldman]

I am also experiencing the same issue, has there been any resolution yet?

[grantfeldman]

In the meatime I have added the following to the compile fn in the uiSelect directive, +/- line 730. Not perfect but its working for my requirements.

    if (tAttrs.ngClass != null) {
        var ngClassRegex = new RegExp(/^{(.+)}\s+{(.+)}$/);
        var match = ngClassRegex.exec(tAttrs.ngClass);
        if (match != null) {
            var combined = '{ ' + match[1].trim() + ', ' + match[2].trim() + ' }';
            tAttrs.ngClass = combined;
            tElement.attr('ng-class', combined);
        }
    }

[code-demo]

you can hack it by add it to class="{{condition ? 'class_a' : ' ' }}"

[Crayth]

I also have this issue, is there any resolution for this yet? For the time being, I have used a workaround, but it is not desired :/

[SajjadGit]

anyone have any work around to deal with ng-class , i need UI-Select to take different classes( like Width)

[DerekDomino]

+1

[xcrash]

+1

[selfdeceited]

+1, the proper fix will be very appreciated.

[lpotapczuk]

+1

[santosguilherme]

+1

[eldo-xy]

+1

[novoxd]

+1

[Magador]

Being spammed by mail ^^ (Holy github notifications), I decided to take @grantfeldman 's example:

This snippet below is supposed to be placed at select.js#L870

var match = /{(.*)}\s*{(.*)}/.exec(tAttrs.ngClass);
if(match) {
  var combined = '{'+ match[1] +', '+ match[2] +'}';
  tAttrs.ngClass = combined;
  tElement.attr('ng-class', combined);
}

I will make a PR.

[antoniodesousa]

You need to escape the open braces:

var match = /\{(.*)}\s*\{(.*)}/.exec(tAttrs.ngClass);

[grantfeldman]

@antoniodesousa Could you explain why? I have run both through a Regex parser and its showing no difference between the two patterns.

[Magador]

The only reason why you would escape open braces is when you match a number, right ?

[antoniodesousa]

The open curly brace should be escaped because it is a special character used for quantifiers eg {2,3}
You're trying to match the actual open brace not quantifying anything.

[Magador]

As defined by the ECMA specification (5.1 as well as 2015), a quantifier can be described as:

• One opening brace, followed by one or more decimal digits, can be followed by a comma, can be followed by zero or more decimal digits, ended by a closing brace

In strict POSIX Basic Regular Expressions (BRE), a regex matching a quantifier would be:
\{\d+(,\d*)?\}

Since {(.*)} is not matching a quantifier, { and } do not need to be escaped.

[scott-engemann]

Can we get some clarification on this? I'm looking to apply a class to a specific item that is selected if an expression is true.

[grantfeldman]

Hi @engemasa, are you looking for clarification on the specification? or the issue itself - as i believe the issue was merged a while back.

[scott-engemann]

Sorry for not being more specific in my original post @grantfeldman. I'm looking for code or an example on how to utilize this. I'm trying to add a class to a selected item conditionally. (i.e. ng-class="{'myClass' : $item.value == ctrl.someValue}".

I hope this clears it up.

[grantfeldman]

@engemasa your code looks fine to me. Are you using the latest version? Can you test the ng-class expression on another element (not ui-select) to test?

[scott-engemann]

That's where I'm getting confused. Which element should I put the ng-class on? I'm going to guess and say it's the ui-select-match element?

[grantfeldman]

@engemasa I have only used ng-class on the ui-select element so not sure if it works on ui-select-match.

[scott-engemann]

Ok, I have a sneaking suspicion that a fellow team member is using an old version. I will double-check this in a little while.

@grantfeldman, Thank you for you quick responses!

[grantfeldman]

No problem. good luck.

[scott-engemann]

I have made a plnkr with an example. My confusion is where to use the ng-class.

http://plnkr.co/edit/43PMErMiIBiCQMc80rJE?p=preview

(Look at the home.html and homeCtrl.js files)

In this example, I would expect to have the item with an ID of 'AB134' to have a "red" class applied to it and styled as such (red background, white text). I have tried it both ways with the ng-class only on the ui-select element and only on the ui-select-match element.

[grantfeldman]

Try this?

<ui-select-match placeholder="Select person..."> <span ng-class="{ red : $item.id === 'AB134'}"> {{ $item.name }} (id: {{ $item.id }}) </span> </ui-select-match>

[scott-engemann]

This is a step in a right direction. I think ideally the class should be applied to the span.ui-select-match-item element which is why I kept trying to put it on the ui-select-match element Here are screenshots of what I'm trying to accomplish vs how it currently works.

http://imgur.com/a/iP9mu
The top screenshot is what I'm trying to achieve. I added the class manually in the element inspector.
The bottom screenshot is how it currently works (and looks).

[grantfeldman]

@engemasa Yeah i saw that as well. I think the best way forward would be to have a look at the ui-select source, make some changes and see if you can get it working locally. If so then make a pull request?

[scott-engemann]

I will give it a shot. I already forked the repo. Thank you!

On Tue, Aug 30, 2016, 9:42 PM Grant notifications@github.com wrote:

@engemasa https://github.com/engemasa Yeah i saw that as well. I think
the best way forward would be to have a look at the ui-select source, make
some changes and see if you can get it working locally. If so then make a
pull request?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#277 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAWMMQkwa_6qp471qbgotEY36fYnLnAHks5qlNwKgaJpZM4Cs0KX
.

http://www.scottswebs.net

[aroraketan]

hi @engemasa

have you got a solution for the problem? I've been stuck at it as well.

Thanks

[CarlosSoria]

I have the same problem,

I did the following workaround, I put the ui-select element inside another div element and apply ng-class to div element then on css add style to the ui select classes (ui-select-container)

[joaopgg]

+1

[tproenza]

Hi any updates for this issue? Thanks!

[Jefiozie]

@tproenza No updates , are you looking for something specific?