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>
Related
I want to built an ng-repeat with dynamic buttons that change according to $state.params so I wrapped them in a directive.
link:function(scope,element,attrs) {
$rootScope.$watch('params.source',function() {
var link = scope.link;
var name = scope.name;
var href = $state.href('home',{source:link});
if($state.params.source.indexOf(scope.link) == -1) {
var template = '<a href="'+href+'" class="btn
btn-default">'+name+'</a>';
}
else template = '<a href="'+href+'" class="btn
btn-default">'+name+' what!?</a>';
el = $compile(template)(scope);
element.replaceWith(el);
});
}
But after the the first change of params, element is forgotten and answers with Cannot read property 'replaceChild' of null
How can I replace element?
Edit: I need to swap the whole Element for sowmething else in final product, that's why I can't use ng-show or ng-if
Thanks!
You may be better off using ng-hide or ng-show in your html. Maybe something like this:
<div ng-repeat="yourArray as item">
<a href="{{item.href}}" class="btn
btn-default">{{item.name}} <section ng-show="conditionToShow">what!?</section></a>';
</div>
This is a bit cleaner of a solution and it keeps you from having to add a watch. Watches are expensive and you should avoid them if at all possible.
Edit:
<div ng-repeat="yourArray as item">
<div class="singleBtn" ng-show="conditionToShow" >
{{item.name}}
</div>
<div class="multiBtn" ng-hide="conditionToShow">
<a //rest of multi btn code
</div>
</div>
Because of the fact that Angular provides both ng-show and ng-hide directives this allows you to control the presentation of these elements based on just one conditional.(i.e. your state.params)
When it is true, it will show just one btn and when it's false it will show multiple buttons. If the logic needs to be reversed, just switch ng-show and ng-hide.
Hopefully I understood your need better this time.
In my application, I want to display a content based on active link, Example: if the link is "new" then "abc" and if link is "view" then "xyz" should be displayed. For that, I've used following code for my application.
<li>New</li>
<li>View</li>
<span class="white-text" ng-show="{{ $route.current.activetab === 'new' }}">new</span>
<span class="white-text" ng-show="{{ $route.current.activetab === 'view' }}">view</span>
When you use {{}}, the values are interpolated, i.e. the markup is replaced with the result of the expression. ngShow expects only the expression, so just use the function as it is, and it will work:
<span class="white-text" ng-show="$route.current.activetab === 'new' ">new</span>
<span class="white-text" ng-show="$route.current.activetab === 'view' ">view</span>
In general, you'll only want {{ }} when your expression / content should be displayed.
Hope this works!
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.
I have the $scope object (array of objects) like this
$scope.parts = [];
(content of $scope.parts is changing during 'run-time', not just filled once per page load)
Later, it some custom directive i show those parts in such manner:
<li ng-repeat="part in parts">
<span>{{part.name}}
<i class="fa fa-check"
tooltip="some tooltip"
...
</i>
</span>
</li>
According to some logic, i want to change 'fa-' class and tooltip text.
I can do it like this
<i class="fa"
ng-class="haveDescr(part.name)"
//and in directive's controller
$scope.haveDescr = function (partName) {
return someCondition ? 'fa-check' : 'fa-question-circle';
};
and so on for the tooltip, and... for every attribute i want to change?
Is there a better way, than to write a scope "check-function" for every attribute? How can i trigger changes in every single part/property of $scope.parts and do the DOM changes described above? What is the right "angular way" for this? Or, maybe it is possible to 'intercept' ng-repeat action and do everything there?
You can use ng-class with an 'object' expression.
<i class="fa" ng-class="{'fa-check' : part.name, 'fa-question-circle' : !part.name}">
You can use ng-class and title
<i ng-class="{'fa-check':showFaCheck(part.name), 'fa-question': !showFaCheck(part.name) }" title="{{getTooltip(part.name)}}"/>
Fiddle http://jsfiddle.net/4PYZa/303/
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>