In my angular app i have a flag icon using the code:
<i ng-click="detail.flag()" class="fi-flag"></i>
I also have a boolean variable that I'd like to use to disable this.
I've tried the following to no avail:
<i ng-disabled="showDuplicate" ng-click="detail.flag()" class="fi-flag"></i>
and
<div ng-disabled="showDuplicate"><i ng-click="detail.flag()" class="fi-flag"></i></div>
Any ideas why they dont work?
Thanks.
ngDisabled - This directive sets the disabled attribute on the element if the expression inside ngDisabled evaluates to truthy.
Elements that can receive the disabled attribute include <button>, <input>, <textarea>, <optgroup>, <option> and <fieldset>.
That's why it won't work on <i> (or <div>) element.
DEMO
As others mentioned, ng-disabled is specific for some tags only. I assume that you want to disable clicking on the element when your variable is false, you can do it this way
<i ng-click="showDuplicate && detail.flag()" class="fi-flag"></i>
This is called short circuiting an expression, if showDuplicate is true, the next term will be evaluated which is detail.flag() if it is false, it will not continue evaluating the next term since false && true is still false so it will not bother evaluating the next terms
Though you should be styling the element if you disable something, so you should add a class that says it is disabled and style it accordingly
<i ng-class='{disabled: showDuplicate}' ng-click="showDuplicate && detail.flag()" class="fi-flag"></i>
in your css:
.disabled{
cursor: not-allowed;
opacity: 0.8 /* ? it's up to you how you want to style it*/
}
The answer is correct, you cannot use ng-disable with icon html tag.
I tried somthing like that:
<div ng-controller="DemoController as detail">
<i ng-disabled="detail.showDuplicate" ng-click="detail.flag()" class="fa fa-flag">test</i>
<button ng-disabled="detail.showDuplicate" ng-click="detail.flag()" class="fa fa-flag"></button>
</div>
https://plnkr.co/edit/0DBXJ4o9hmdtep8PM4Wc?p=catalogue
I hope it helps.
Related
Is it possible to have ng-show or ng-hide work on Ionic icon elements?
<i ng-show="seat1" id="space-1" class="ion-record"></i>
<i ng-show="seat2" id="space-2" class="ion-record"></i>
<i ng-show="seat3" id="space-3" class="ion-record"></i>
<i ng-show="seat4" id="space-4" class="ion-record"></i>
Yes.
Alternatively, you could wrap the icons in divs, too.
<div ng-show="seat1"><i id="space-1" class="ion-record"></i></div>
<div ng-show="seat2"><i id="space-2" class="ion-record"></i></div>
<div ng-show="seat3"><i id="space-3" class="ion-record"></i></div>
<div ng-show="seat4"><i id="space-4" class="ion-record"></i></div>
Yes, you can use ng-show or ng-if on every elements.
ng-if actually removes or recreate an DOM element, while ng-show only makes DOM element hidden or not. In this case if for example seat1 is falsy, the element will have class="ion-record ng-hide" and this ng-hide class makes your item
{display: none !important;}
I use collapse plugin from Bootstrap, and i also want to change class for another element accordingly (change class of fa-icon).
I also use AngularJS and i liked the idea of using condition in ngClass like this:
<i ng-class="collapsableItemId.hasClass('in') ? 'fa-chevron-up' : 'fa-chevron-down'">
When item is not collapsed bootstrap adds in class to it. I want to try to change icon based on class presence in collapsable item, but did not succeed in it. In bootstrap manual there is also mentioned that collapse generates events which i could probably use, but i also do not know how.
It should work like this. Use ng-click on the collapse toggle element to change some other scope var and then use that var in the ng-class of the icon..
<a href="" data-toggle="collapse" data-target=".collapse" ng-click="isOpen=!isOpen">
<i class="fa" ng-class="(isOpen) ? 'fa-chevron-up' : 'fa-chevron-down'"></i>
</a>
<div class="collapse in">
I'm the collapsible element.
</div>
http://www.bootply.com/nqLf22HCli
<i ng-class="{'fa-chevron-up': abc.isOpen ,'fa-chevron-down': !abc.isOpen }"></i><div ng-show="abc.isOpen">Hi..This div will be show hide and icon will be change accordingly</div>
Use ng-click on collapsing header and put that div which you want to collapse
add ng-show="abc.isOpen".
i try use ng-if, but angular no compile him. Look in test code:
<ul class="tmmenu-admin-tabs-builder-panel-answer">
<li class="tmmenu-admin-tabs-builder-panel-portlet" ng-repeat="answer in answers">
<div>
<span ng-repeat="question in questions">
<label ng-repeat="answer in question.answers">
<input type="checkbox">{{question.id}}.{{answer.id+1}}
<span ng-if="test()">ddd</span>
</label>
</span>
</div>
<textarea>{{answer.text}}</textarea>
</li>
</ul>
and function test:
$scope.test = function(){
console.log('d');
return false;
}
if run this page, we can see "ddd" in "Li" despite to test return false.
Next step, i replaced at "ng-if" "ng-show" :
<ul class="tmmenu-admin-tabs-builder-panel-answer">
...
<span ng-show="test()">ddd</span>
...
</ul>
And its working, "ddd" hide. Why ng-if not working where working ng-show?
The ngIf directive removes or recreates a portion of the DOM tree based on an {expression}. If the expression assigned to ngIf evaluates to a false value then the element is removed from the DOM, otherwise a clone of the element is reinserted into the DOM.
The ngShow directive shows or hides the given HTML element based on the expression provided to the ngShow attribute. The element is shown or hidden by removing or adding the ng-hide CSS class onto the element. The .ng-hide CSS class is predefined in AngularJS and sets the display style to none (using an !important flag). For CSP mode please add angular-csp.css to your html file (see ngCsp).
Could be a scope problem, is there something in a child scope that might override the value for test? ng-if works fine for me (plunker). I assume that everything else is working fine, are you seeing 'd' in the console to show that your function is getting executed?
Try changing your tag to this to help debug and you should see that it is a function:
<span ng-if="test()">test is: {{test.toString()}}</span>
I'm working on the template for a directive. If a property in the scope is set to true, data-toggle="dropdown" should be appended to the element. If the variable is false, this data attribute should not render as an attribute of the element.
For example, if scope variable is true, the template should render:
<span data-toggle="dropdown"></span>
If false, the template should render:
<span></span>
What would the template look like to accomplish this?
For example, I know that I can use ng-class to conditionally include a class. If I want the template to render this:
<span class="dropdown"></span>
Then my template would look like this:
"<span ng-class="{ 'dropdown': isDropDown }"></span>
If scope variable isDropDown is false, then the template will simply render:
<span></span>
So there's a way in a template to conditionally add a class="dropdown". Is there a syntax for templates that allows me to conditionally add data-toggle="dropdown"?
One of the things I've tried for the template is:
"<span data-toggle="{ 'dropdown': isDropDown }"></span>
My thinking with the above template is that if the scope variable isDropDown is true, the value of data-toggle will be set to "dropdown". If isDropDown is false, then the value of data-toggle would simply be an empty string "". That doesn't seem to work though.
I think a good way could be to use ng-attr- followed by the expression you want to evaluate.
In your case it would be something like:
<span ng-attr-data-toggle="{{ isValueTrue ? 'toggle' : 'notToggle' }}"></span>
Here's a fiddle with an example.
<span ng-attr-data-toggle="{{isTrue && 'dropdown' || undefined }}"></span>
will produce when isTrue=true :
<span data-toggle="dropdown"></span>
and when isTrue=false :
<span></span>
At the moment, there is no angular directive that allows you to remove or add an attribute conditionally. You can do ng-switch around the span, one with that attr and another one without it.
<div ng-switch on="condition">
<span data-toggle="dropdown" ng-switch-when="value"></span>
<span ng-switch-default></span>
</div>
or
<span data-toggle="dropdown" ng-if="expression"></span>
<span ng-if="!expression"></span>
You can also create a directive for that same purpose (adding/removing attrs conditionally) but that would be a bit more complicated.
Additionally if what you want is manage the scope variable inside the directive you can pass it as another attribute.
Example:
<span data-toggle="dropdown" when="isDropDown"></span>
I would like to style a text by its length. So true is red and false is green. I use ng-class with expression. It's possible to change the css after a user click?
This is a plunkr: http://plnkr.co/edit/ndCqpZaALfOEiYieepcn?p=preview
<div>
<p ng-class="{true:'green',false:'red'}[name.length>3 && toggle]">{{name}}</p>
<p><b>Length: </b> {{name.length}} character(s)</p>
<button ng-click="toggle=!toggle">Toggle class</button>
</div>
Initially, toggle is undefined, which I think is causing an error when evaluating the expression [name.length>3 && toggle]. Then when you click the button, the opposite of undefined is true, so then your toggle starts working as you expect.
To fix this, you can use ng-init to evaluate an expression before the views are processed.
For example, if you change your div to be:
<div ng-init="toggle = true">
then the class starts out as green initially.