I have a company site that I am developing with AngularJS and I am having some troubles with ng-class
Here is my HTML:
<a href="timeEntry.php" ng-class="{{(userRole.admin) ? '' : 'inactive'}}">
LINK
</a>
CSS:
.inactive {
pointer-events : none;
cursor : default;
}
Chrome Inspect Element:
<a href="timeEntry.php" ng-class="inactive">
LINK
</a>
Obviously I have tested class="inactive" and it is working as it should, Chrome's view source appears to be showing me something that should be working but it is not being applied.
Assuming userRole.admin is a boolean, this should work
<a href="timeEntry.php" ng-class="{ inactive: !userRole.admin }">
LINK
</a>
I think this will work:
Link
you can also have multiple conditions in the object, just put commas between them. The format is cssClass:<boolean expression>
ng-class expects an expression, so in your original code the part inside {{}} is being evaluated, and then angular is again evaluating the result of that, trying to interpret 'inactive' as a variable name. If you want to use a ternary just omit the {{}} from your original code
<a href="timeEntry.php" ng-class="userRole.admin ? '' : 'inactive'">
LINK
But for this particular example, the solutions provided by others using the object format are preferred.
Related
I'm working on my own personal portfolio and I have my social media saved as a template to just pull from using this code in React.
{this.state.contact.map((contact, index) =>
<a className="social-icons" href={`${contact.href}`} target="_blank" rel="noopener noreferrer" key={index}>
<h3 className={`ion-social-${contact.title}`}></h3>
</a>
)}
I'm trying to create the same effect while using Vue for the ion-social-icons but I'm having a hard time figuring out how to implement it as I just receive an error talking about using v-bind:class that doesn't help much. This is what I'm currently trying.
<p class="social-media snippet ion-social-{{social.title}}" v-for="social in socials" v-bind:key="social">
{{ social.title }}
</p>
I'm relatively new to Vue also.
The error you get is:
Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead.
For example, instead of <div class="{{ val }}">, use <div :class="val">.
Off the top of my head, there are 3 ways to set an html attribute in Vue.
You want to set a string literal. Just write it as if you were writing regular HTML.
class="myClass". You cannot interpolate javascript here, which is what you're trying to do and what Vue was warning about.
You want to use a javascript variable defined in your component. Use v-bind.
v-bind:class="myClassVariable"
Same as above, where : is just a shortcut for v-bind.
:class="myClassVariable"
A working example of your class binding looks like this,
<p class="social-media snippet" :class="'ion-social-'+social.title" ...
The value inside :class="..." is simply an expression, where 'ion-social' is a string literal that's appended with the variable social.title. Once your template gets messy, which imo it is now, you should remove logic from your template and put it inside the component.
Using interpolations in HTML attributes was possible in Vue 1.0, but is no longer supported since 2.0. Here, you need to use v-bind, then add the variable with the string like you would in JS.
<p
v-for="social in socials"
v-bind:class="'social-media snippet ion-social-' + social.title"
v-bind:key="social"
>
{{ social.title }}
</p>
I have a variable that could be potentially unset like this
{{salesperson || 'not set'}}
I want to add a CSS class to the not set area like this
{{salesperson || '<span class="error">- Not Set -</span>'}}
When I tried that it throws syntax errors.
HTML in expressions is escaped by angular, to avoid HTML/JS injections.
Use ng-class:
<span ng-class="{error: !salesperson}">{{salesperson || 'not set'}}</span>
Or simply ng-show/ng-hide:
<span ng-hide="salesperson" class="error">not set</span>
<span ng-show="salesperson">{{ salesperson }}</span>
So if you really, really want to inject HTML, look at this question: With ng-bind-html-unsafe removed, how do I inject HTML?
But if you just want to show an error if it's not defined:
{{salesperson}}<span ng-if="!salesperson" class="error ng-cloak">- Not Set -</span>'
It will only show the span if salesperson is undefined. Make sure to define your ng-cloak css as well to prevent any flickering.
In ui-sref, i need to add two states like ui-sref="form.profile.retail and form.profile.corporate" , i am not sure how to do this, i have tried using conditional operator but didnt work.
In form.html
<a ui-sref-active="active" ui-sref="form.profile.retail"><span>2</span> Login</a>
Here is the Plunker
Thanks
You can use ng-switch to determine what link to place, I cannot understand your conditional needs so I'll place only an example.
Assign a scope variable like isRetail to define when the link should be one or another:
<div ng-switch on="isRetail">
<a ui-sref-active="active" ui-sref="form.profile.retail" ng-switch-when="true">Retail</a>
<a ui-sref-active="active" ui-sref="form.profile.corporate" ng-switch-default>Corporate</a>
</div>
Try this :
ui-sref="form({retail: form.profile.retail, corporate: form.profile.corporate})"
You can see this exmaple where multiple params are being passed :
http://plnkr.co/edit/r2JhV4PcYpKJdBCwHIWS?p=preview
<div ng-switch="signedIn()">
<a ng-switch-when="false" >Text1</a>
<a ng-href="#/post_form" ng-switch-when="true">Text2</a>
</div>
Edit//
When $scope.signedIn is getting changed both Text1 and Text2 are visible.
So it works as intended untill you log in/log out - then for a second both Text1 and Text2 are visible.
Edit//
All answers suggesting using ng-if ng-hide/show - problem is still there.
I know that ng-if is "DOM friendly".
I understand the simplicity and readability of the switch, as well as the nesting that it provides, but I would suggest going with something more basic.
You can certainly use the ng-show/ng-hide approach that rhasarub suggested in their answer, but because you appear to be doing something regarding login, I would suggest using ng-if. The difference is that when the condition is not met, then the DOM is not rendered at all, so it cannot be inspected by a curious/knowledgeable user.
<a ng-if="!signedIn()" >Text1</a>
<a ng-href="#/post_form" ng-if="signedIn()">Text2</a>
Problem was caused by also applying transition on border-bottom property, removing it solved problem.
You don't need ng-switch for a simple boolean value. You can use ng-show and ng-hide instead:
<a ng-hide="signedIn()" >Text1</a>
<a ng-href="#/post_form" ng-show="signedIn()">Text2</a>
<div ng-switch-on="signedIn()">
<a ng-switch-when="false">Text1</a>
<a ng-href="#/post_form" ng-switch-when="true">Text2</a>
</div>
I have the following
<div ng-if="false"> nothing here </div>
Shouldn't the div's content be hidden?
I want to make this slightly more complex like :
<div ng-if="user.id == 1">
The name is: {{user.name}}
</div>
but none of the above work.
The aim is if the ng-if expression is true to run the code inside the div. Is the ngIf the correct expression or is there a better boolean/expression handler?
ng-if directive is introduced in AngularJS v1.1.5, so you must be using some older version of Angular.
Here is a plunker: http://plnkr.co/edit/gvDUsLrTSS54jCJMDS89?p=preview
Everything just works fine.
Stewie is right you are using probably the stable 1.0.8 version of angular.