I am trying to add aria-expanded to a link, I want the value of aria-expanded to be true when the user has expanded the link and false when it's not. I am not sure how to achieve this, i think a ternary operator would do but not sure how.
<a href="" ng-click="do()" class="" aria-expanded="{{}}" aria-label="test">
<span class=""></span>Something
</a>
You can simply bind the property to a variable
<a href="" ng-click="do()" class="" aria-expanded="{{expandedValue}}" aria-label="test">
<span class="">Something</span>
</a>
In your controller
$scope.do = function(){
$scope.expandedValue = !$scope.expandedValue;
}
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>
hello i am working on a navigation direction.
if there are any child entries i have to add a attribute "uib-dropdown"
<li ng-attr-uib-dropdown="{{!!tree[$index].children ? '' : undefined }}" ng-repeat="nav in tree" ng-class="{ 'active' : isActive(nav.path) }">
the variable "!!tree[$index].children" would return true or false.
i am behind google now since 2hours but i cannot see how to use this expression with ng-attr the right way.
because now its adding the uib-dropdown to every li. doesn´t matter if it is true or false.
i hope someone can help me.
thanks
Because our answer for tree[$index].children can be truthy, if tree[$index].children has an answer, it will be true, if it's empty or undefined, then it will be false/falsey. There is no need for the !! or the ternary operator.
<li ng-attr-uib-dropdown="{{tree[$index].children}}">
You could also use the || (or operator) to better illustrate "falsey" of undefined.
<li ng-attr-uib-dropdown="{{tree[$index].children || undefined}}">
Created a plunkit. Here I used ng-if where if the array "food" exist, then allow the dropdown. If you remove the "food" array, the link is replaced without the dropdown.
<a href ng-if="!food">
Click me, no dropdown, yo!
</a>
<!-- Simple dropdown -->
<span ng-if="food" uib-dropdown on-toggle="toggled(open)">
<a href id="simple-dropdown" uib-dropdown-toggle>
Click me for a dropdown, yo!
</a>
<ul class="dropdown-menu" uib-dropdown-menu aria-labelledby="simple-dropdown">
<li ng-repeat="choice in items">
<a href>{{choice}}</a>
</li>
</ul>
</span>
I'm trying to make an angularjs app, I used the angularJS routing for the different views.
What I'm trying to do is have a variable that changes its value depending on the view I'm in, I tried to make a function :
$scope.set_variable = function(param){
$rootScope.variable = param;
}
then call the function with ng-click in HTML :
<div class="collection blue" ng-controller="AccueilCtrl">
<i class="material-icons mdi-action-home "></i> Accueil <span class="badge white lighten-2">Vous êtes ici</span>
<i class="material-icons mdi-action-supervisor-account "></i> Effectifs
<i class="material-icons mdi-action-today "></i> Absences
<i class="material-icons mdi-action-room "></i> Carto
</div>
but that wasn't a success, could you please help me do it ? or tell me why this isn't working ?
Thank you
In the controller of each view, inject $rootScope and then change the value of the variable using :
$rootScope.variable = value;
No need for different functions or ng-click because the controller is excecuted on its own when the view is called
ng-click does not work inside ng-repeat. I have read all the guides and similar questions, but nothing work in my code. If I click on the tag inside the ng-repeat nothing happen, but if I click on my button the function is called.
html
<div ng-repeat="sykdom in sykdommer" ng-model="sykdom.name" ng-click="test();">
<a class="item item-icon-right" href="#" ng-click="test();" >
{{sykdom.name}}
<i class="icon ion-ios-arrow-right"></i>
</a>
</div>
<button ng-click="test()> test </button>
JS
$scope.sykdommer = [{name:'test1'},
{name:'test2'},
{name:'test3'}];
$scope.test = function(){
alert('you clicked!');
};
I have tried with ng-click="$parent.test()" and ng-model="sykdom.name" without any luck. Please help, really stuck on this problem :(
Here is an example i've made with your data: http://plnkr.co/edit/o4sqPd
Template should be like:
<div ng-repeat="sykdom in sykdommer">
<a class="item item-icon-right" href="#" ng-click="test(sykdom.name);" >
{{sykdom.name}}
<i class="icon ion-ios-arrow-right"></i>
</a>
</div>
You should use ng-model directive only in case if it's a part of you changeable data - in input/textarea etc. tags (documentation: https://docs.angularjs.org/api/ng/directive/ngModel)
<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>