I'm hiding or showing a div when a button is clicked.
I want to change the text in the link to say "show" / "hide".
I have it working but is there a better way to change the text rather than checking for the variable on two seprate spans.
<a ng-click="showHint = !showHint"><span ng-if="showHint">Hide</span><span ng-if="!showHint">Show</span> tips</a>
<div ng-if="showHint">
<p>
Hint text Hint text Hint text Hint text
</p>
</div>
You can use conditional operator with interpolation.
<a ng-click="showHint = !showHint">{{ showHint ? "Hide" : "Show"}}tips</a>
Fiddle
Check this, hope it works for you:
<span ng-bind="showHint ? 'Hide' : 'Show'"></span>
Complete Snippet:
<a ng-click="showHint = !showHint">
<span ng-bind="showHint ? 'Hide' : 'Show'"></span> tips
</a>
OR
<a ng-click="showHint = !showHint">
<span ng-bind="showHint ? 'Hide tips' : 'Show tips'"></span>
</a>
Related
I am creating menu using angularJS. I need to add or remove class while click
my code shown below
<i class="fa fa-home {active === 'home' ? 'fa-spin': ''}" ></i> Home
I need to add and remove class (fa-spin) based on active value. But the above code was not working.
Following is the correct syntax:
<i class="fa fa-home" ng-class="{'fa-spin':active=='home'}"></i> Home
Suggestion
Better use UI-router instead of making menu manually. UI-router has directives like ui-sref-active which will automatically add active class to active menu and remove from rest of the menu items
Try this:
[ngClass]= "[active == 'home' ? 'fa-spin' : '']"
Use ngClass (See documentation: https://docs.angularjs.org/api/ng/directive/ngClass)
The general syntax for the ng-class directive is as follows:
ng-class="{'class1': condition, 'class2':condition, ...'classn':condition}"
Therefore, your code should look like:
<i class="fa fa-home" ng-class="{'fa-spin': active === 'home'}" ></i> Home
<i ng-class="{'fa-spin': active === 'home'}" class="fa fa-home"></i>
I need to toggle between two svg's inserted with the ng-include directive.
Basically, I want to transform this:
<i class="indicator oppcicon {{domain.show_requests ? 'icon-chevron-down' : 'icon-chevron-right'}}"></i>
In something like this:
<i ng-include class="indicator" src="{{domain.show_requests ? 'images/chevron-down.svg' : 'images/chevron-right.svg'}}" ></i>
Is this possible?
I found the solution:
<i class="indicator" ng-include="domain.show_requests ? 'images/chevron-down.svg' : 'images/chevron-right.svg'" ></i>
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/
<div class="company_name" ng-controller="CompanyName">
<h1 class="left">
{{data.company_name}}
</h1>
</div>
What I'd like to do is make it so that if data.company_name hasn't been added through an input field, it shows a placeholder "Company name", how can that be done using angularjs?
You can use ng-if and do something like
<div class="company_name" ng-controller="CompanyName">
<h1 class="left">
<span ng-if="data.company_name === ''">
// Some placeholder
</span>
<span ng-if="data.company_name !== ''">
{{data.company_name}}
</span>
</h1>
</div>
BTW ngIf is a new directive added in v1.1.5 so you might need to upgrade your angular version
See my plunker here : http://plnkr.co/edit/qiN2XshEpay6e6zzhUKP
One way to keep the code clean is to use a filter. This piece of code adds a class to an active tab.
var filters = angular.module('filters');
filters.filter('ie', function(){
return function(v, yes, no){
return v ? yes : no;
};
});
Template
<li class="{{activeTab == 'home' | ie: 'active-class':''}}">
Home
</li>
For Using ng-if, ng-else-if, and ng-else in your project use this:
https://github.com/zachsnow/ng-elif
You can use ng-if condition for the check company name vlaue. Let's take example of
<span ng-if="driver.status_flag == 1">
<i ngif="{{driver.status_flag}}" class="icon-ok-sign icon-2x link" style="color:#090" href="#" title="Payment received" ></i>
</span>
In above example I have added condition status_flag value is 1 then the inside span value will show. Same way with your case you can add statement like
<span ng-if="data.company_name === ''">
<i ngif="{{driver.status_flag}}" class="icon-ok-sign icon-2x link" style="color:#090" href="#" title="Payment received" ></i>
</span>
My problem is that I have multiple span tags within a p tag.
I want only the HTML code within the innermost span tag.
Ex:
<span>
<span>
<span>
<span> <strong> lkfghsij</strong> hi how are u?
</span>
</span>
</span>
</span>
Here I want only the strong tag and the text after it to be written into a file.
How do I go about this? Regards.
solved...it was pretty simple...just add:
select().last().html();