ng-class set class name from dynamic value and add extra conditions - angularjs

I was looking for the syntax to add classname from a value.
Just before giving up ,i found here an answer that works.
Now the problem is you can't add , like you would normally and add more conditions.
What would be the correct syntax for Ex2 to work?
Ex1: This works:
ng-class="{'{{obj.status}}' : obj.status}"
Ex2: This doesn't work: (also no error in the console)
ng-class="{'{{obj.status}}': obj.status, 'isEmployee': status == 'isEmployee'}"
Update:
I didn't change anything relevant any now it works >< Give me some time to figure out what the hell is going on ...
I know what i did to make it work. I was trying to change something else and i added this to the controller that made it work, because it's basically the same data :
$scope.status= obj.status
This would be the solution in my case.
Copy/Pasted the exact code for the button, since you all say it should work. Can you spot something wrong with it?
<md-button ng-class="{'{{editedObject.interviewStatus}}' : editedObject.interviewStatus, 'isEmployee': interviewStatus == 'isEmployee'}" aria-label="OpenStatusMenu" ng-click="$mdMenu.open($event)">

please check your obj and status value it's look like this?
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope,$http,$q) {
$scope.obj = {
"status":"abc"
}
$scope.status = "isEmployee";
});
.abc{
color: blue;
}
.isEmployee{
background-color: pink;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<span ng-class="{'{{obj.status}}': obj.status, 'isEmployee': status == 'isEmployee'}">both class added</span>
</div>

A comma should work. You might have forgotten the " at the end?

Related

AngularJS ng-class the same class with different conditions

I have a option in the back-end to let user change icon in default and in hover state. This is the code
ng-class="{'{{getAnswerButtonHoverIcon()}}':hovering, '{{getAnswerButtonIcon()}}' : !hovering}
But the problem is, when the user selected the same icon for default state and hover state, like for example they have selected "fa-circle-o" the output of the HTML will be
ng-class="{'fa-circle-o':hovering, 'fa-circle-o' : !hovering}"
and it doesn't work anymore. When I try to test it out, it removes the "fa-cricle-o" class on hover. Any idea why is it happening? And if you can suggest better solution, it will be greatly appreciated. Thanks!
I mentioned in a comment that I would probably have a single function but I think I misunderstood your question at first. Building on Joshua's approach here is something that could work for you: if the two functions return the same value then it still works.
I feel that this is not the nicest solution since it is generating a string into a class, but the same can be changed to ng-class and {hovering ? sg() : sgelse()} as value. I hope it shows you a way to handle these kind of interactions.
Let me know if it does/doesn't work so that we could further help you.
var app = angular.module("mainModule",[]);
app.controller("mainCtrl", function($scope){
$scope.icon = {};
$scope.icon.hovering = false;
$scope.getAnswerButtonHoverIcon = function(){
return 'bluebg';
};
$scope.getAnswerButtonIcon = function(){
return 'redbg';
};
});
.bluebg{background-color:blue}
.redbg{background-color:red}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="mainModule">
<div ng-controller="mainCtrl">
<div class="{{ icon.hovering ? getAnswerButtonHoverIcon() : getAnswerButtonIcon() }}"
ng-mouseenter="icon.hovering = true" ng-mouseleave="icon.hovering = false">
<p>I have different backgrounds</p>
</div>
</div>
</div>
You can also use the ng-class like this, which will just apply the class the function outputs:
ng-class="(hovering ? '{{getAnswerButtonHoverIcon()}}': '{{getAnswerButtonIcon()}}')

value of progressbar doesnt work

theres my progress bar code:
<div class="col-sm-4" ng-repeat="var in payloadNbrMissionParStatut">
<h4 class="no-margin">{{var.number}}</h4>
<progressbar value={{tom}} class="progress-xs no-radius no-margin" type={{gg}} ng-if="var.des=='Clos' ? gg='danger' : var.des=='En cours'? gg='warning' :gg='info' " ></progressbar>
{{var.des}}
</div>
the problem is in the value: when i populate it with static data it works good, but when i populate wit data come from the controller it doesnt work.
var is a reserved JS keyword. As errors inside directive expressions are silent, you aren't seeing any alerts because it's simply being ignored. Change var to something else and it should work.

Removing inline formats in Quill

I'm having some trouble getting removeFormat to work as it should. Funnily, I thought I had this working a couple days ago; but now when I check it it's not right. It is removing the block-level formatting regardless of where the selection is. A simple example, using the Quill Quickstart with a few modifications:
var editor = new Quill('#editor', {
modules: { toolbar: '#toolbar' },
theme: 'snow'
});
let Block = Quill.import('blots/block');
let Parchment = Quill.import('parchment');
class BlockquoteBlot extends Block { }
BlockquoteBlot.scope = Parchment.Scope.BLOCK;
BlockquoteBlot.blotName = 'blockquote';
BlockquoteBlot.tagName = 'blockquote';
Quill.register(BlockquoteBlot);
let quill = new Quill('#editor');
$('#italic-button').click(function() {
quill.format('italic', true);
});
$('#bold-button').click(function() {
quill.format('bold', true);
});
$('#blockquote-button').click(function() {
quill.format('blockquote', true);
});
$('.cust-clear').click(function(ev) {
var range = quill.getSelection();
quill.removeFormat(range.index, range.length);
});
<link href="https://cdn.quilljs.com/1.0.3/quill.snow.css" rel="stylesheet"/>
<script src="https://cdn.quilljs.com/1.0.3/quill.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Create the toolbar container -->
<div id="toolbar">
<button id="bold-button" class="ql-bold">Bold</button>
<button id="italic-button" class="ql-italic">Italic</button>
<button id="blockquote-button" class="ql-blockquote">Blockquote</button>
<button class="cust-clear" title="Clear Formatting">X</button>
</div>
<!-- Create the editor container -->
<div id="editor">
<p>Hello World!</p>
</div>
In this example, if I apply bold to "Hello" and make the entire line a blockquote, all looks as it should. If I then select "Hello" and click my X button to remove the formatting, it removes the blockquote formatting even though I'm nowhere near a "\n" character. Am I misunderstanding removeFormat, or is there an error in how I've created my BlockquoteBlot? I took that code mostly from the Medium demo on the Quill site, but I found in some cases I needed to specifically define the scope so that the tag would be recognized as block (that may not be necessary for this demo, but I'm including it in case it poses an issue).
The way removeFormat is supposed to work currently does remove all block formats a user highlights, even if it is not across the "\n" character. This makes more sense when the user is selecting multiple lines Issue #649 but perhaps it should not work this way when there is only one line partially selected. I've created a Github Issue to discuss this. Please feel free to chime in.
I am aware that this is an old thread - as an additional to your code in case someone hasn't selected anything - works on Quilljs 1.2.6
$('.cust-clear').click(function(ev) {
var range = quill.getSelection();
if (range.length ===0) {
let leaf, offset = quill.getLeaf(range.index);
quill.removeFormat(range.index - offset, range.index + leaf.domNode.length);
} else {
quill.removeFormat(range.index, range.length);
}
});
This should work
$('.cust-clear').click(function()
{
var range = editor.getSelection();
if (range){
if (range.length > 0) {
editor.removeFormat(range, Quill.sources.USER);
}
}
});

When I use ng-bind-html, it will not be able to bind $ scope to this content

My code as follows:
<div class="arInfo"><p class='article' ng-bind-html="bodyText"></p></div>
js:
$scope.bodyText = <p>In its decisions, Facebook ;
$scope.open = function(url){
window.open(url, '__blank');
}
But,when I click here, it will not open a new window.I think it because the $scope did not bind to here.
I try to change my code like this:
$scope.bodyText = $interpolate(<p>In its decisions, Facebook)($scope);
and this:
$scope.bodyText = $compile(<p>In its decisions, Facebook)($scope);
It also cannot work
Anybody knows how to solve this problem?
$scope.bodyText should be eqaul to a string. So your code should be like this:
$scope.bodyText =
'<p>In its decisions, Facebook' ;

Setting class values in Angular template

I'm a bit of an Angular novice an I'm struggling with something I thought would be very simple.
I have a template that is used in a read only version of a form in my app. This template displays a status field that would be styled (text/background colour) based on its value, e.g
'New issue' - orange
'In progress' - green
'Overdue' - red
etc...
My css is something like;
.status-bar {padding: 3px; border: solid 1px #333}
.new-issue {background-color: orange; color: #000}
.in-progress {background-color: green; color: #fff}
.overdue {background-color: red; color: #fff}
The issue status field is available through the controller and i use code something like this to display it.
<div class="status-bar">{{issue.status}}</div>
All works fine.
I then naively tried to simply insert the class name as an expression, e.g
<div class="status-bar {{issue.status}}">{{issue.status}}</div>
Thinking that would give me a this kind of output..
<div class="status-bar overdue">overdue</div>
But it doesn't work. I've looked at the ng-class directive, and other options but can't work this out.
Ideally I need a solution that would allow me to append/insert a class name based on a value (not a true/false like ng-class). So I'd like my oputput HTML to be like the following...
<div class="status-bar in-progress">In Progress</div>
OR
<div class="status-bar new-issue">New Issue</div>
OR
<div class="status-bar overdue">overdue</div>
etc...
The range of status values may change so my class names must be calculated as per the above pattern
e.g,
<div class="status-bar another-status">Another Status</div>
So I need a way to hyphenate and lowercase my issue.status value and then add it as a class name. I presume a directive is the way forward, which would be ideal so I can use it in other views.
This is so easy to do after the fact in jQuery etc..., but I can't see the 'Angular' way to do it?!
Many thanks upfront for any help provided...
ng-class with a custom filter is what you are looking for...
HTML
<h1 ng-class="class1">{{class1 | titleCase}}</h1>
JS
app.filter('titleCase', function () {
return function (input) {
var words = input.split('-');
for (var i = 0; i < words.length; i++) {
words[i] = words[i].charAt(0).toUpperCase() + words[i].slice(1);
}
return words.join(' ');
}
});
and here is working PLUNKER...
ng-class should work :
<div class="status-bar" ng-class="issue.status">{{issue.status}}</div>
Working fiddle : http://jsfiddle.net/w2SFr/2/
What You are looking for is probably http://docs.angularjs.org/api/ng/directive/ngClass. You may also want to look at AngularJS ngClass conditional

Resources