any way to make an expression for ngClass to be a conditional. For example, I have tried the following using javascript:
$scope.setEnabled = function(status){
$scope.filterEnabled = status;
if(status){
angular.element(document.querySelector( '#enabledFalse')).removeClass('active-btn');
angular.element(document.querySelector( '#enabledTrue')).addClass('active-btn');
} else {
angular.element(document.querySelector( '#enabledTrue')).removeClass('active-btn');
angular.element(document.querySelector( '#enabledFalse')).addClass('active-btn');
}
}
And view :
div class="buttons">
<a id="enabledFalse" href="" ng-click="setEnabled(0)" class="click-btn active-btn">No</a>
<a id="enabledTrue" href="" ng-click="setEnabled(1)" class="click-btn">Yes</a>
</div>
What's the best way to apply this using ngClass?
Here is what the conditional statement would look like:
<a href class="click-btn" ng-class="{ 'active-btn' : filterEnabled }" ng-click="setEnabled(0)">No</a>
<a href class="click-btn" ng-class="{ 'active-btn' : !filterEnabled }" ng-click="setEnabled(1)">Yes</a>
And the js would simply be:
$scope.setEnabled = function(status){
$scope.filterEnabled = status;
}
Edit:
As an alternative, here's the most simplified method I can think of:
<a href class="click-btn" ng-class="{ 'active-btn' : filterEnabled }" ng-click="filterEnabled = !filterEnabled">{{ filterEnabled ? 'Yes' : 'No' }}</a>
You won't need anything in the js file; the Yes/No text and active-btn class will toggle when you click this single button, because they depend solely on the value of filterEnabled.
This is assuming only having one button is acceptable.
Outside of my SO-tag comfort zone, here, but you can use a ternary expression, where each tag is setup as the negation of the other:
... id="enabledFalse" ng-class="( filterEnabled)? 'active-btn' : ''"
... id="enabledTrue" ng-class="(!filterEnabled)? 'active-btn' : ''"
Other classes to be applied unconditionally can be placed in a regular class attribute.
Also in each tag:
ng-click="filterEnabled=!filterEnabled"
if you want each to toggle, or call the function as you have it.
Related
Depending on a notification type, I need to change icon image of this notification.
There are three types of notifications.
notifications_type:
answer_created
user_subscribed
answer_selected
Icon image is placed inside i tag in a span tag. I don't want to use any conditions, instead I want to do this with switch statement. How am I supposed to do this?
Here is my code:
<div class="media g-mb-20">
<span v-bind="changeIcon" class="u-icon-v3 g-rounded-50x g-mt-2 g-mr-15 g-height-40 g-width-40 g-bg-gray-light-v5">
<i class="icon-bubble g-font-size-18 g-color-gray-light-v1"></i>
</span>
<a href="#"
class="media-body g-brd-around g-brd-gray-light-v4 g-py-10 g-px-15 g-bg-gray-light-v5--hover u-link-v5 g-rounded-3">
<p class="mb-0 g-font-size-16 g-color-gray-dark-v3">
<span class="g-font-stag-medium">{{ item.message }}</span>
</p>
</a>
</div>
I suppose that I need to bind a function with the help of a v-bind directive to a span with an icon. Then I would add the switch statement to this function.
You don't need to bind anything, it's just a matter of using the right classes. define your icon as such:
<i class="g-font-size-18 g-color-gray-light-v1" :class="switchIcon"></i>
then you define a new computed property:
computed: {
switchIcon () {
switch (this.notification_type) {
case 'some_type':
return 'icon-bubble'
default:
return ''
}
}
}
this way, when notification_type is equal to some_type, your icon will render as:
<i class="icon-bubble g-font-size-18 g-color-gray-light-v1"></i>
I have struggling with the syntax with angularjs (used in nodered). I want to set diffrent bootstrap classes on each row depending on the workorder.state in a list.
if the "if statement are true" it should use success class. But the if are never true it always use default "info". Even if the output of {{workorder.state}} are "Ready". Any suggestions?
<div class="list-group" ng-repeat="workorder in workorders">
<button type="button" class="ng-class:{{workorder.state}} === 'Ready' ? list-group-item list-group-item-success responsive-width : list-group-item list-group-item-info responsive-width;">
<span class="brnodisplay">{{workorder.state}}</span>
</button>
</div>
I get below error in browser console.
app.min.js:142 Error: [$parse:syntax]
http://errors.angularjs.org/1.5.10/$parse/syntax?p0=%7B&p1=invalid%20key&p2…
ve-width%20%3A%20list-group-item%20list-group-item-info%20responsive-width
at http://127.0.0.1:1880/ui/js/app.min.js:29:426
at throwError (http://127.0.0.1:1880/ui/js/app.min.js:256:200)
at t.object (http://127.0.0.1:1880/ui/js/app.min.js:256:33)
at t.primary (http://127.0.0.1:1880/ui/js/app.min.js:252:151)
at t.unary (http://127.0.0.1:1880/ui/js/app.min.js:251:503)
at t.multiplicative (http://127.0.0.1:1880/ui/js/app.min.js:251:249)
at t.additive (http://127.0.0.1:1880/ui/js/app.min.js:251:76)
at t.relational (http://127.0.0.1:1880/ui/js/app.min.js:250:416)
at t.equality (http://127.0.0.1:1880/ui/js/app.min.js:250:241)
at t.logicalAND (http://127.0.0.1:1880/ui/js/app.min.js:250:94)
You don't have to use interpolation {{}} and filter common classes(which should be there irrespective of the check) to class.
HTML:
<div class="list-group" ng-repeat="workorder in workorders">
<button type="button" class="list-group-item responsive-width" ng-class="{'list-group-item-success': workorder.state === 'Ready' ,'list-group-item-info':'workorder.state !== 'Ready' }">
<span class="brnodisplay">{{workorder.state}}</span>
</button>
</div>
For more reference:
Adding multiple class using ng-class
https://docs.angularjs.org/api/ng/directive/ngClass
Try changing your ng-class to this (ng-class is used in lieu of class, not in addition to as you have used):
ng-class="workorder.state === 'Ready' ? 'list-group-item list-group-item-success responsive-width' : 'list-group-item list-group-item-info responsive-width'"
https://docs.angularjs.org/api/ng/directive/ngClass
<div class="list-group" ng-repeat="workorder in workorders">
<button type="button" class="list-group-item responsive-width" ng-class="{'list-group-item-success': workorder.state === 'Ready' , 'list-group-item-info': workorder.state !== 'Ready' }">
<span class="brnodisplay">{{workorder.state}}</span>
</button>
</div>
Hello I am facing problem to make Li as Active tab, I already add hover effect but How to add Active tab?. I user Angular's ng-show and ng-hide to change icon in li. Here is my code
<li ng-mouseenter="show = true" ng-mouseleave="show = false" id="home">
<img src="images/home.png" ng-hide="show" class="whiteClass" />
<img src="images/home_h.png" ng-show="show" class="blackClass"/>
</li>
How can i make it as active tab using ng-click??
Thanks in advance
Update :
<li ng-mouseenter="liMouaeEnter()" ng-mouseleave="liMouseLeave()" id="issuesLi" ng-click="navbarclick($event , issueTab)">
<img src="images/issues.png" ng-class="{'active': !isActive, 'inactive': isActive}"/>
<img src="images/issues_h.png" ng-class="{'active': isActive, 'inactive': !isActive}"/>
</li>
Here jS file on controller
var navClickBool = false;
$scope.liMouaeEnter = function(){
$scope.isActive = false;
this.isActive = true;
navClickBool = false
}
$scope.navbarclick = function(event , template){
$scope.isActive = false;
this.isActive = true;
navClickBool = true
}
$scope.liMouseLeave = function(){
if(navClickBool){
return
}
this.isActive = false;
}
If you need to toggle a class on an element, not only show/hide it, you can use ng-class instead of ng-hide/ng-show. ng-class automatically adds/removes a class based on the truth value of a $scope variable. You can toggle that truth value on ng-click (that automatically binds the onClick event to the DOM node, just like on-mouseenter binds onMouseenter).
<div ng-init="isActive = false">
<div ng-click="isActive = !isActive " ng-class="{'active': isActive}">
<em>Foo</em>
</div>
</div>
You now only have to write the .active { } CSS rule.
Also, you can add multiple rules on ng-class
ng-class="{'active': isActive, 'inactive': !isActive}"
and this will work as expected (switching between the two classes).
Note that I'm using ng-init to initialize my Boolean to false. You can also initialize it directly in the controller ($scope.isActive = false;).
I'm having problems with angularjs ng-switch
JS
function TestCtrl($scope) {
$scope.currentUser = {"userId":"1","userRole":"N"};
$scope.userRoles = {"normal":"N","admin":"A"}
$scope.patient = {name: 'John'};
}
HTML
<div ng-switch on="currentUser.userRole">
<a ng-switch-when="userRoles.normal" href="normalUrl">
{{patient.name}}
</a>
<a ng-switch-when="userRoles.admin" href="adminUrl">
{{patient.name}}
</a>
<div ng-switch-default> default </div>
</div>
</div>
I expect the name of the patient to be displayed with a link to normalUrl but 'default' is displayed. What am I doing wrong?
Here is a fiddle with the code
The ngSwitchWhen directive does not evaluate expressions (although I've heard this might be added to 1.3). The value is interpolated as a string literal, so you would have to use it like this:
<a ng-switch-when="N" href="normalUrl">
That will work, but if you really need to dynamically determine your when value, then maybe ngIf will better suit your needs:
<a ng-if="currentUser.userRole === userRoles.normal" href="normalUrl">
<a ng-if="currentUser.userRole === userRoles.admin" href="adminUrl">
Let's say i have,
<span class="cls1 cls2" data-bind="title: title" ></span>
I want to add another class via JSON object,
{ title: 'a', clas: 'cls3' }
This work's,
<span class="cls1 cls2" data-bind="attr:{title: title,'class': 'cls1 cls2'+clas}" ></span>
But the problem is that it will add two class attributes. I need the cls1 and cls2 class on beginning. But need cls3 class after some event.
You should use css binding instead of attr for this. Read more about it in the documentation: http://knockoutjs.com/documentation/css-binding.html.
You code will look something like this:
<span class="cls1 cls2" data-bind="text: title, css: myClass" ></span>
Here is working fiddle: http://jsfiddle.net/vyshniakov/gKaRF/
Using multiple classes:
<span
class="yourClass"
data-bind="css: { myClass: (true == true), theirClass: (!true == false), ourClass: true }"
>Thine Classes</span>
You can use the css binding to do this:
<span class="cls1 cls3" data-bind="css: clas"/>
This adds the value of your "clas" property to the current class collection of the element