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>
Related
I'm stuck. Cannot figured this out. This question is very simple to show, but I'm not really sure how to put it as a question, therefore I'll try my best.
First, here's the layout of my whole app (The problem lies in the Header.jsp):
<jsp:include page="../home/Header.jsp" />
<jsp:include page="../home/Modals.jsp" />
<div data-ng-view data-save-scroll-position data-position-relative-to-menu></div>
<jsp:include page="../home/Footer.jsp" />
The problem is very simple. I have the following data-ng-class in the data-ng-view section that change a tab to active if something is true (The problem is it won't work in one scenario even though it displayed true in the tab name):
<ul class="nav nav-tabs">
<li role="presentation" data-ng-class="tab.isSelected ? 'active' : ''" data-ng-repeat="tab in ctrl.tabs"
data-ng-click="ctrl.fetchBIReports(tab)">
</li>
</ul>
In the JSP that use data-ng-include for the above markup, there's a side nav to change to this page. Once clicked this side-nav, it highlighted the tab 'active' as expected (trying not to include the whole jsp):
<div class="side-navbar">
<ul>
<li class="{{ ctrl.navigate.path == 'bi/schedule' ? 'active-link' : 'normal-link'}}">
Schedule Reports
</li>
</ul>
</div>
<div class="content-right" data-ng-include="ctrl.navigate.path"></div>
content-right includes the JSP mentioned in the second markup.
So far, so good. Here's a demo of it working (including both side-navbar and content-right):
The problem is, in my Header.jsp, there's a nav bar that takes me to the same page. If it is clicked from a different page with different controller, then it works. But if I'm in the current controller and click that nav bar link, then data-ng-class does not take 'active' as its class. Here's the markup for the Header.jsp for that link:
<li class="dropdown" data-roles="['ROLE_ADMIN']">
<a href="#/bi" class="dropdown-toggle" data-toggle="dropdown" data-ng-click="ctrl.changeNavigation('bi/schedule')"
role="button" aria-haspopup="true" aria-expanded="false">BI Management<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Schedule Reports</li>
</ul>
</li>
Here is the demo of it not working even though it is printing out true in the UI:
The only problem is with this UI. All the data are populated. Records are displayed for the correct tab. Even side nav-bar is displaying the correct active class.
Your syntax for ng-class is off a bit. The format is "{ '[class-name]': [expression that evaluates to true or false] }". You can have multiple class values separated by commas each with their own expression. When an expression is true, the corresponding class is applied to the element and when it is false the class is removed from the element. The way you have written it would almost work for the plain class attribute, but you would need to include the interpolation characters: {{ and }}. Here is a very simple example to illustrate ng-class.
angular.module('app', []);
.red {
color: #fff;
background-color: #e21d1d;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="app">
<label>
<input type="checkbox" ng-model="applyRedClass" /> Apply 'red' class
</label>
<div ng-class="{'red': applyRedClass}">
This is a simple example of how to use ng-class.
</div>
</div>
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;
}
In my ng-repeat, i require the DOM to be switched, according to the active status.
i tried like this, but not working for me:
<ul>
<li ng-click="activate(item)" ng-repeat="item in items" ng-class="{active : active == item}">
<span ng-if="item==active">
<span>{{item}}</span><!-- when active nested under span -->
</span>
<!-- else without nesting the span -->
<span ng-if="item== !active">{{item}}</span> //this is not working
</li>
</ul>
Live Demo
Replace your last ng-if statement to this (you've just made syntax error):
<span ng-if="item !== active">{{item}}</span>
Your active variable isn't boolean, so you can't toggle it in your statement.
I have a list of questions to display.
I would like to add a question mark icon next to the question whenever it has a description.
<ul class="list-group" data-toggle="items" ng-repeat="ques in questions">
<li class="list-group-item"><input type="checkbox" /> {{ques.question}}
<div ng-if="{{ques.description}}">
<i class="glyphicon glyphicon-question-sign" title="{{ques.description}}"></i>
</div>
</li>
</ul>
So I add all the question and when it has a description I would like to add an icon.
The code above is not working so if you can help !
Thx
ng-if="ques.description"
without the curly brackets, should do it, with a recent version of angular.js (>1.1)
For more information, please check the ng-if official documentation
However, if you are using an older version of angular.js, you cannot use the ng-if directive. It would explain why your glyphicon is always displayed, regardless of the ng-if condition.
If it is the case, here is a workaround:
<div ng-switch="ques.description==null">
<i ng-switch-when="false" class="glyphicon glyphicon-question-sign" title="{{ques.description}}"></i>
</div>
Try change line:
<div ng-if="{{ques.description}}">
to:
<div ng-if="ques.description">
Replace this part :
<div ng-if="{{ques.description}}">
<i class="glyphicon glyphicon-question-sign" title="{{ques.description}}"></i>
</div>
with :
<span ng-if="ques.description">
<i class="glyphicon glyphicon-question-sign" title="{{ques.description}}"></i>
</span>
Fiddle
1st thing remeber ng-if="expression" never works with interpolation directive {{}} it will need an expression, It would be great if you check length.
And for better binding with title attribute use ng-attr-title, it will create title attribute when {{ques.description}} get parsed.
<div ng-if="ques.description.length > 0">
<i class="glyphicon glyphicon-question-sign" ng-attr-title="{{ques.description}}"></i>
</div>
The solution is in the comments below my post.
The probleme was that I was on a 1.0.x version of angularJS which did not have the ng-if directive.
I downloaded a new angular.js and now it works !
For my angular application , i have created left nav menu. On click of link ,corresponding page is opening. My problem is I want to change active link color to blue whereas other links are in white color. When I click another link from menu ,that link should be in blue and remaining are in white.
I do not know how to do this in angular. With Jquery , its easy for me. But angular makes me nervous.
My left nav is
<div class="leftNavList">
<div class="leftNavManageHeading"><span "mSans300 font14">Manage</span></div>
<ul class="nav manageNav">
<li ng-click="isCollapsed2 = !isCollapsed2">
<div class="listOuterWrapper">
<div class="listInnerWraper">
<span class="mSans300">Usage</span>
</div>
</div>
</li>
<li ng-click="isCollapsed3 = !isCollapsed3">
<div class="listOuterWrapper">
<span class="mSans300">Payment</span>
</div>
<div class="listInnerWraper">
<div collapse="!isCollapsed3">
<ul class="paymentNav mSans30 font14">
<li>PaymentMethod</li>
<li>PaymentHistory</li>
</ul>
</div>
</div>
</li>
<li ng-click="isCollapsed4 = !isCollapsed4">
<div class="listOuterWrapper">
<div class="listInnerWraper">
<span class="mSans300">Account</span>
</div>
</div>
</li>
</ul>
</div>
Step 1: In ng-init declare a variable.
ng-init="activelink=0"
Step 2: Now in ng-cick of link change the value of activelink.
<li><a href="" ng-click="activelink=1"</a></li>
<li><a href="" ng-click="activelink=2"</a></li>
Step 3: Declare a class linkcolor that defines the color of the active link.
Step 4: Now use ng-class="{ 'linkcolor' : activelink==1 }" expression for both the link.
Step 5: The links will change to
<li><a href="" ng-click="activelink=1" ng-class="{ 'linkcolor' : activelink==1 }" </a></li>
<li><a href="" ng-click="activelink=2" ng-class="{ 'linkcolor' : activelink==2 }"</a></li>
The expression activelink==1 will return true or false depending on the value of activelink.
I would recommend looking into ui-router , it has active states (these are the pages of your app) which do all these css and state changing from the view rather than having the logic in your controller and there are many powerful tools to make your app function better in less code..
In your nav:
<ul>
<li ui-sref-active="active" class="item">
<a href ui-sref="route1">route1</a>
</li>
</ul>
And thats it! Your currently active state/ view will apply the ui-sref-active="active" class to that li element. where "active" is the class name which is applied.