I am working on a task list with Vue.JS (like everyone) and I've managed to add a task, show the tasks and even to delete the tasks. After that I was working on checking tasks and give them a class for success.
So I thought, if I have a data like class set to false, and use this line of code:
<div v-for="(task, index) in tasks" class="panel panel-default" :class="{panel-success: task.class}" :key="task">
I could set the class to true with a click event and give the particular class of panel-success (from bootstrap).
When I was doing that, I came up to the following problem:
avoid using JavaScript keyword as property name: "class" in expression :class="{panel-success: task.class}"
The problem was, the kebab case syntax of panel-success. When I changed the name to panelsuccess it was working. Why is kebab case not working?
The value for :class is a Javascript object, and in Javascript objects a kebab-case identifier is not valid, that's why you're having that error. For it to work, simply wrap your kebab-case identifier around single quotes:
:class="{'panel-success': task.class}"
Related
This question already has answers here:
Adding multiple class using ng-class
(12 answers)
Closed 2 years ago.
I'm trying to combine all my styles for a dropdown item into a single ng-class to reduce watchers, particularly like this...
ng-class="[button.icon, {'disabled': button.disableCallback(), 'hidden':button.hiddenCallback()}]
It gives a dropdown a button if it has an icon, but also defines disabled and hidden styles if they apply. Where button.icon could be any string like "add-icon" "remove-icon" etc. The other two just add disabled or hidden css class if the callback is true.
However, doing this I'm seeing the class being defined as just the object like...
class="[object Object]"
I think it's just adding the second object the {'disabled': button.disableCallback(), 'hidden':button.hiddenCallback()} as the style since it's defined, thinking it's a string?
Is there a better way to do this? Have a dynamic class set on ng-class (the button.icon), and add these conditional ones based on the callback (the {'disabled': button.disableCallback(), 'hidden':button.hiddenCallback()} )
Using just strings with ternaries fixes this issue I was having and not mixing objects/strings within the ng-class.
ng-class="[button.icon, button.disableCallback() ? 'disabled' : '', button.hiddenCallback() ? 'hidden' : '']"
I believe this is related to the bug under the "Known Issues" of the ngClass page.
https://docs.angularjs.org/api/ng/directive/ngClass
I am new using AngularJS.
I am able to calculate the dynamic value using {{}} but new CSS is not replaced with the old one.
<div class="progress-bar" role="progressbar" ng-style="width:{{survey.progressbar.width}}">
When I am using
style="width:{{survey.progressbar.width}}"
I am getting expected results in Chrome but not in IE11
That is not the correct way to use the ng-style. use it like this.
<div class="progress-bar" role="progressbar" ng-style="{'width' : survey.progressbar.width}">
I have counter same problem before.
That's because you are not understand the Angularjs ng-style technique. See below doc:
The Angularjs provide two directives ngClass & ngStyle both of them are able to receive an expression, the expression result is one of the list below:
A string, using references to css class name each of them are separate by space.
An array of css class names.
An object, it's a set of key-value pair, key is the css class name and the value is the boolean. The class will be used when value eq true.
Back to your code.
You prefer to use {{expression}} to get a dynamic value .
The first row you use the ng-style,it check expression as a string"width:value" and there is no css class name match so it's inoperative
The second row you just use style attribute, it may browser layout engine difference.
I am wondering if the html class attribute should only be used for styling. Is there any drawback to using the class attribute as a variable. The W3 spec http://www.w3.org/TR/html5/dom.html#classes does not specify one way or another but, all examples and training point in the direction of styling only for multiple objects.
In my case I want to use the class attribute as variable that matches the key value in a object array. For example in my Javascript code I have an object that has a number of key/value pairs. On my web app I have a number of save buttons. When a save button is clicked I grab the parents class attribute value and use it as the key for the object to know which value to change. The class attribute on the parent has not other value than to let me know which key value pair to change in my object
While I'm sure it's possible to use classes that way, it's certainly not their intended purpose. html has data attributes that provide the functionality you want, for example
<button data-key="some value" name="" id="">click me</button>
You can then get that value (onClick if you like) and use it as a key for your object/data structure. Theres a good overview here
While it is not bad, it neither is best practice.
You can, instead of using the class attribute, define explicit data attributes. Using the class attribute would mean that you could not use several classes (because that would be a weird key to search for in an object, right?).
For instance:
<div class="any classes you like" data-mykey="searchforthiskey">
<button></button>
</div>
In jQuery:
$('button').click(function() {
var key = $(this).closest('div').attr('data-mykey');
});
From a functional perspective, there's no reason to NOT use the class attribute to store information about that element. You can access a class attribute as easily as you can a data attribute.
From a standards perspective, it is probably better to use a data attribute. Why? Well, if you are the only person working on your front-end, no big deal. If you are one of many on a team of front-end developers, who works specifically on the javascript side of things, you may run into a conflict with another front-end developer who works on the HTML/CSS side of things. They may remove a class from the element, not realizing that its also being used as your javascript hook into that element. In that case, you're better off creating your own data attribute, which then makes it clear that this attribute is probably data related and won't be molested by someone just trying to fix the styling of that element.
I have a div that I want to give a dynamic class with AngularJS.
The div is withing an ng-repeat statement where lang.prefix is first en then sv
Using the following code works and sets the class to i-flag-en than i-flag-sv, but is it correct?
<div class="float-left flag i-flag-{{lang.prefix}}"></div>
I know there exist a ng-class directive which can be used to dynamically set the class of an element with AngularJS.
I think I read somewhere in a book, that the normal class directive not should be used to set the class property dynamically with AngularJS because of the way Angular manipulates the dom.
However, the following code does not work:
<div class="float-left flag" ng-class="i-flag-{{lang.prefix}}"></div>
and I rather want to set the class in this way instead of creating another scope variable.
Is it bad practice to use the class attribute with AngularJS to dynamically set the class? Does it work all the time even if it would be bad practice?
The book you have mentioned may have talked about the problems of using ng-class and class {{}} interpolations together wherein updates in the interpolation removes the ng-class classes, this problem has already been resolved, reference. Thus, using interpolation within class attributes is totally fine, and does not break good practice because both has its own quirks.
Your usage of ng-class however is incorrect, you have to concatenate the literal string value with your scope string variable:
<div class="float-left flag" ng-class="'i-flag-' + lang.prefix"></div>
but I think it is much preferable to use your first example instead:
<div class="float-left flag i-flag-{{lang.prefix}}"></div>
I am using jsf and liferay. I am very new to it. For any javascript method which select any element of jsf for some javascript or jquery method I need to set it like.
<h:inputText id="abc" binding="#{abc}"/>
Please note that I have set binding same as id, somebody has told me to do like that. Without setting binding like that I was not able to select any element in my javascript method. I really dont know the reason. Since this was working for me so I have used it, without going in detail
But now for some functionality I really need actual use of binding, bind UIInput to managed bean. So I have changed my tag like.
<h:inputText id="abc" binding="#{mybean.uiAbc}"/>
In this case my javascript method like
function doSomething(){
$("##{abc.clientId}").val("hello everyone");
}
its not working. Its giving me exception like... # is undefined..
In javascript I have nothing to do with binding so why it stops working now? And why it was working earlier with same value of binding as id have?
If you replace binding="#{abc}" by binding="#{myBean.uiAbc}", then you should obviously also change #{abc.clientId} elsewhere in the view by #{myBean.uiAbc.clientId}.
function doSomething(){
$("##{myBean.uiAbc.clientId}").val("hello everyone");
}
That the id and binding need have to be the same name is complete nonsense.
The only problem which you may face is that the default JSF naming container separator character, :, is a special character in CSS selectors, like as used in jQuery, and thus this construct would possibly fail. This construct would only work if you've manually reconfigured your JSF webapp to use a different, CSS-safe, character like - or _. If you indeed use the default of :, then you should use
function doSomething(){
$("[id='#{myBean.uiAbc.clientId}']").val("hello everyone");
}
See also:
How to use JSF generated HTML element ID with colon ":" in CSS selectors?
Your myth for following is wrong, i.e. to have same id and binding attribute.
id="abc" binding="#{abc}"
JSF renders component with id which provided by us with preceding by form id. e.g. in your case it will be,
:formId:abc
to avoid prepending form id just set prependId attribute to false. it will render the component with id "abc" only.
Also if your component is naming container e.g. dataTable. Then you the method accessing client id is different.
In short just right click in your browser and check the element's id and you can find the id to the jQuery.