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">
Related
Is it possible to split this ng-repeat loop in angularjs? I have a set of tabs and the data is found in workspace in workspaces. I want to basically check a condition ng-if "savedSettings=='account'", show specific tab. ng-if"savedSettings=='shelf'" show tab. How can I work this conditional render in?
There are four tabs found in this workspace.
<li ng-repeat="workspace in workspaces" class="workspace.activeclass">
<a id="workspace.tabid" href="{{workspace.hrefid}}" data-toggle="tab"> {{workspace.name}}
</a>
</li>
Use the ng-show directive:
<li ng-repeat="workspace in workspaces"
class="workspace.activeclass"
ng-show="workspace.tabid == savedSetting">
<a id="workspace.tabid" href="{{workspace.hrefid}}" data-toggle="tab"> {{workspace.name}}
</a>
</li>
For more information, see
AngularJS ng-show Directive API Reference
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>
angular-bootstrap version used : 1.2.0
angular-version : 1.5.7
I am trying to override header html of uib-tab like below,
<li ng-class="{active: active, disabled: disabled}" class="uib-tab">
<a ui-sref="MyController.overviewStateUrl" ng-click="select()" uib-tab-heading-transclude>{{heading}}</a>
</li>
When the page is rendered, the value for ui-sref is taken as MyController.overviewStateUrl instead of the real value which is stored in overviewStateUrl attribute of MyController. Is there any way to do it?
I tried to put it inside interpolation, but it returns empty string. Here's the plunker.
Have you tried as like below code?
<a ui-sref="{{MyController.overviewStateUrl}}" ng-click="select()" uib-tab-heading-transclude>{{heading}}</a>
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'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>