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>
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>
Building a table I am deep within nested ng-repeats.
Depending on a scope variable I have to display/use a different field from my objects.
Is there a shorter way to adress the decision/field call in a way that could look like 'from now on use expression as myVar'?
Currently my code looks very ugly and basically always repeating a pattern like direction==='sources' ? connection.target.X : connection.source.X
As I am already pretty deep I cannot simply rearrange my array in Controller first.
This is just a small part of it:
<strong>{{direction==='sources' ? connection.target.name : connection.source.name}}</strong>
<br>
<a ng-click="goToEntityUsingReport(direction==='sources' ? connection.target.id : connection.source.id)">
<i class="fa fa-plus-square-o"></i>
</a>
<a ng-show="hasFurtherConnections(direction==='sources' ? connection.target.id : connection.source.id)" ng-click="setEntityFocus(direction==='sources' ? connection.target.id : connection.source.id)">
<i class="fa fa-chevron-circle-right"></i>
</a>
{{getEntityTotal(direction==='sources' ? connection.target.id : connection.source.id) | acCurrency}} total)
You can assign this expression on the return statement of a function in your controller in order to look cleaner.
e.g.
$scope.getValueBasedOnProperty(connection, prop) {
if($scope.direction === 'sources') {
return connection.target[prop];
}
else {
return connection.source[prop]
}
}
Then in the view:
<strong>{{getValueBasedOnProperty(connection, 'name')}}</strong>
<br>
<a ng-click="goToEntityUsingReport(getValueBasedOnProperty(connection, 'id')">
<i class="fa fa-plus-square-o"></i>
</a>
<!-- And goes on ... -->
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>
For a simple listed item with a data-toggle, I was just wondering how to conditionally stop a data-toggle.
%li{'data-toggle'="modal", 'data-target'='#myModal'}
I am looking for something like:
%li{'data-toggle'="admin"?"modal":"", 'data-target'='#myModal'}
Where admin is an angularJS variable. Just wondering if something like this is possible. I tried the above code and it doesn't not work as expected.
I don't know the specifics of the HAML syntax within an Angular context, but there are a number of ways you can do this in HTML. I'm sure the same concepts would apply when translated to HAML.
interpolation
<li data-toggle="{{admin ? 'modal' : ''}}" data-target="#myModal">
ng-attr
<li ng-attr-data-toggle="{{admin ? 'modal' : ''}}" data-target="#myModal">
ng-if
<li ng-if="admin" data-toggle="modal" data-target="#myModal">
<li ng-if="!admin" data-toggle="" data-target="#myModal">
<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>