Condition based class in knockoutjs data binding.
Request you please point out where I'm wrong
function blahBlah() {
var self = this;
self.isColorRed = ko.observable(true);
}
ko.applyBindings(new blahBlah());
body {
background-color: green;
}
.colorRed {
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div>Green everywhere</div>
<div class="colorRed">RED without Bind</div>
<div data-bind="class: {colorRed:isColorRed}">Should be red</div> <!-- not working -->
You need to use isColorRed as a function, also use the css keyword
function blahBlah() {
var self = this;
self.isColorRed = ko.observable(true);
}
ko.applyBindings(new blahBlah());
body {
background-color: green;
}
.colorRed {
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div>Green everywhere</div>
<div class="colorRed">RED without Bind</div>
<div data-bind="css: { colorRed: isColorRed() }">Should be red</div>
Related
I want to change div background color based on class name 'cls-editable', which is used by javascript to find the element and then set editable attribute to be 'true' or 'false.
When editable, background is yellow. Otherwise, it's white.
HTML
<div class='cls-editable'>
Hello
</div>
CSS:
.cls-editable, [contenteditable="true"] {
background-color: yellow;
}
.cls-editable, [contenteditable="false"] {
background-color: white;
}
Javascript:
if (this.checkStatus) {
$('.dirs_row').children('.cls-editable').each(function () {
$(this).attr('contenteditable', 'true');
});
} else {
$('.dirs_row').children('.cls-editable').each(function () {
$(this).attr('contenteditable', 'false');
});
}
But, it does not work. What's wrong with css?
Try this
CSS
.cls-editable[contenteditable="true"] {
background-color: yellow;
}
.cls-editable[contenteditable="false"] {
background-color: white;
}
OUTPUT
You got it almost correct! Here is the correct solution:
.cls-editable[contenteditable="true"] {
background-color: yellow;
}
.cls-editable[contenteditable="false"] {
background-color: white;
}
<div class='cls-editable' contentEditable="true">
Hello
</div>
<div class='cls-editable' contentEditable="false">
Hello
</div>
I am using the Knockout js in my project,I need to add multiple css class name to particular tag.below is my code i have three different class how i can add it in knockout css binding kindly suggest.
<img data-bind="attr: { src:ProfileImageSrcName }" class="tabUser profile-Image tabpic" />
you can ise css binding like below.
var vm = {
profileImageSrcName: ko.observable('http://cumbriaskills.wdfiles.com/local--files/files:images/metro_128_chrome.png'),
isProfilePic: ko.observable(true),
isTab: ko.observable(true),
toggleProfile: function() { vm.isProfilePic(!vm.isProfilePic()); },
toggleTab: function() { vm.isTab(!vm.isTab()); }
};
ko.applyBindings(vm);
.tabUser { width: 100px; height: 100px; object-fit: contain; }
.profile-image { border-radius: 100% }
.tabPic { box-shadow: 0 2px 6px rgba(0,0,0,0.4) }
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<img data-bind="attr: { src: profileImageSrcName },
css: {
'profile-image': isProfilePic, /* single class */
'tabUser tabPic': isTab /* multiple classes */
}" />
<br><br>
<button data-bind="click: toggleProfile">Toggle "profile-image" Class</button><br>
<button data-bind="click: toggleTab">Toggle "tabUser" and "tabPic" Classes</button>
Use css binding to assign multiple class name.
http://knockoutjs.com/documentation/css-binding.html
var masterVM = (function () {
var self = this;
self.classNames = ko.pureComputed(function(){
return "className1 className2 className3";
}, self);
})();
ko.applyBindings(masterVM);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div class="existingClass" data-bind="css: classNames">
Inspect this element to see list of the 4 class names.
</div>
I have following code:
Pug:
div(ng-class="('{{selectedMessageType}}' == 'incoming')?'messageTypeSelected':'messageTypeNotSelected'")
CSS:
.messageTypeSelected{
background-color: #E8A83C;
color: #ffffff;
}
.messageTypeNotSelected{
background-color: #E4E4E4;
}
JS:
$scope.selectedMessageType = 'incoming';
$scope.changeMessageType = function(){
($scope.selectedMessageType == 'incoming')?$scope.selectedMessageType = 'outgoing':$scope.selectedMessageType = 'incoming';
};
My {{selectedMessageType}} is replaced correctly with the logic. I have also checked on it using Inspector on browser. However, the styling is not applied, when value is changed.
What could be wrong in my code?
You don't need the {{}} in ngClass directive.
Change your code to:
<div ng-class="selectedMessageType == 'incoming' ? 'messageTypeSelected' : 'messageTypeNotSelected'"></div>
A working code:
(function() {
angular
.module('app', [])
.controller('MainCtrl', MainCtrl);
MainCtrl.$inject = ['$scope'];
function MainCtrl($scope) {
$scope.selectedMessageType = 'incoming';
$scope.changeMessageType = function() {
$scope.selectedMessageType = $scope.selectedMessageType == 'incoming' ? 'outgoing' : 'incoming';
}
}
})();
.messageTypeSelected {
background-color: #E8A83C;
color: #ffffff;
}
.messageTypeNotSelected {
background-color: #E4E4E4;
}
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
</head>
<body ng-controller="MainCtrl">
<div ng-class="selectedMessageType == 'incoming' ? 'messageTypeSelected' : 'messageTypeNotSelected'">
<span ng-bind="selectedMessageType"></span>
</div>
<hr>
<button type="button" value="change" ng-click="changeMessageType()">Change class</button>
</body>
</html>
I'd recommend you to check this tutorial
ngClass does not work the way you wrote it. It takes in the format of:
ng-class="{'css-class': trueOrFalseExpression}"
the trueOrFalseExpression could be selectedMessageType == 'incoming'
I want to change a div in a template programatically but I can't get it to work. Is there a way to do this using a helper function?
Template.home.helpers({
jcropdiv: function() {
var div = '';
if(Roles.userIsInRole(Meteor.user(), ['admin'])){
div = '<div id="jcrop_target">';
} else {
div = '<div class="jcrop-holder" style="background-color: black; height: 719px; width: 1280px; position: relative;">';
}
return div;
}
});
I do not believe you can write tags dynamically, but you CAN add attributes to a tag dynamically. For example:
<div {{jcropdiv}}>
Stuff
</div>
Template.home.helpers({
jcropdiv: function() {
var tags;
if(Roles.userIsInRole(Meteor.user(), ['admin'])){
tags = 'id="jcrop_target"';
} else {
tags = 'class="jcrop-holder" style="background-color: black; height: 719px; width: 1280px; position: relative;"';
}
return tags;
}
});
That should return either id="jcrop_target" or 'class="jcrop-holder" style="background-color: black; height: 719px; width: 1280px; position: relative;"' based on if the user is in the 'admin' role.
This is what I ended up with:
//template
<div id="{{jcropdiv.id}}" class="{{jcropdiv.class}}" style="{{jcropdiv.style}}">
//js
Template.home.helpers({
jcropdiv: function() {
var tags={};
if(Roles.userIsInRole(Meteor.user(), ['Sponsor'])){
tags.id = 'jcrop_target';
} else {
tags.class = 'jcrop-holder';
tags.style = 'background-color: black; height: 719px; width: 1280px; position: relative;';
}
return tags;
}
});
Why don't you do something like this in your temaplate instead of making helper
{{#if isInRole 'admin'}}
<div id="jcrop_target">
//do something
</div>
{{else}}
<div class="jcrop-holder" style="background-color: black; height: 719px; width: 1280px; position: relative;">
//do something else
</div>
{{/if}}
I believe it helps
Thanks
I want to show different color for the name of a person if he is Present or Absent.
working in ion view
<ion-view view-title="{{employee.firstName }}">
<ion-content has-header="true" padding="true">
<div ng-style="{{employee.tStatus}} === 'Present' ? { color:'green' } : { color:'red'}"> {{employee.name }}</div>
</ion-content>
</ion-view>
And its not working in any way
Any recommendation please
HTML
<ion-view view-title="{{employee.firstName }}">
<ion-content has-header="true" padding="true">
<div ng-class="{'green':employee.tStatus == 'Present','color: red':employee.tStatus == 'Absent'}">{{employee.name }}
</div>
</ion-content>
</ion-view>
SO Demo
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.employee = {
tStatus: 'Present',
name: 'Sameed'
}
});
.green {
color: green;
}
.red {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-class="{'green':employee.tStatus == 'Present','color: red':employee.tStatus == 'Absent'}">{{employee.name }}
</div>
</div>
You could use a function which gives the right color:
var app = angular.module('app', []);
app.controller('employeeCtrl', function($scope) {
$scope.employee = {
tStatus: 'Absent',
name: 'Foo'
};
$scope.getColorClass = function(employee)
{
switch(employee.tStatus)
{
case 'Present':
return "green";
case 'Absent':
default:
return "red";
}
};
});
it becomes in handy to pass the emploee in to it. if you want to add more classes, you can just modify your function inside your controller.
you can also add multiple classes. separate them with a space while returning.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="app" ng-controller="employeeCtrl">
<div ng-class="getColorClass(employee)">
{{employee.name}}
</div>
</div>
and in your css define the classes
.red {
color: red;
}
.green {
color: green;
}
var app = angular.module('app', []);
app.controller('employeeCtrl', function($scope) {
$scope.employee = {};
$scope.employee.tStatus = 'Absent';
$scope.employee.name = "Foo";
$scope.getColorClass = function(employee) {
switch (employee.tStatus) {
case 'Present':
return "green";
case 'Absent':
default:
return "red";
}
};
});
.red {
color: red;
}
.green {
color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="app" ng-controller="employeeCtrl">
<div ng-class="getColorClass(employee)">
{{employee.name}}
</div>
</div>