I'm trying to manipulate a <select> tag so that it has a different text colour depending on whether the default, disabled <option> is selected or a valid option.
My guess was to put an ng-change directive and pass it an update function, but I don't know what flags I can pass to my function... The documentation is pretty useless to me.
Here is my jsFiddle: http://jsfiddle.net/33QFj/2/
As a rule, don't mess with DOM changes and manipulations anywhere except in a directive.
Hence, you have 2 options:
1) Create a directive to do DOM manipulations to your select.
2) Use ng-class to change the class according to some logic.
Here's your example with using the ng-class:
http://jsfiddle.net/WkFR8/
I changed your code a bit:
<body ng-app="myApp">
<div ng-controller="TestController">
<select ng-model="val" ng-options="opt.name for opt in options" ng-class="{two: val}">
<option disabled value="">Default</option>
</select>
</div>
Note the ng-class I've added. I'm assuming you wanted the text to be blue if we choose anything in the drop down except default.
What the ng-class did was to check if val has something in it (e.g. not 0, not null, not "" etc.) and this rule is satisfied when we change the select value. In this case, the class "two" is added to the element.
I think ng-class is what you are looking for.
Try this: http://jsfiddle.net/rBQu9/1/
After further investigation, I discovered another possible solution particular to this problem.
Since Angular will set classes to the form as defined here, I can use these classes for styling.
So, when a user selects anything other than the disabled default, I know that I can look for the ng-dirty class and style it like that.
Example: http://jsfiddle.net/33QFj/3/
Related
I'd like to apply a directive to all input tags programmatically. Two reasons for this are:
I don't want to have to go through all inputs in my app to add the directive
If I want to change the directive against all inputs at a later date, it's in one place.
Is this possible? I've reviewed the docs but they don't seem to mention applying it in any other way than applying the tag directly to the element.
My current code is like so:
<input type="text" class="form-control input-sm" id="price" v-model="model.doc.price" v-floating-label>
I was having a brain dead moment it seems. I just need an input component. I can then change what I need on there and it will update everywhere the input component has been used and instead of using the standard html input tag, I'll use my component.
Long day ...
I've answered this question myself instead of deleting it in case anybody else has the same brain dead moment in the future ;)
As per Evan You:
Vue.js compilation happens when you instantiate/mount the root instance.
See https://github.com/vuejs/Discussion/issues/77#issuecomment-60339440
I don't think what your are trying to do is sane: search and replace, coming out of the box in many text editors or IDE, will be really helpful for your two explained reasons.
You can bind that directive to a condition like so
<input type="text"
class="form-control input-sm"
id="price"
v-model="model.doc.price"
:v-floating-label=(condition)>
If condition == true , v-model-float directive will be applied to your input.
Update 1: From the comments, the implementation will still be the same, except you control the condition from one place. That way, you can remove the directive at a later date by simply setting that condition to false.
I am wondering if the following is possible:
<directiveName parameter1=value1 parameter2=value2 ng-disabled="true"> </directiveName>
For some reason, it wasn't working for me and I wasn't able to find much examples of a use like this.
I can, however, toggle the visibility of the directive using this:
<directiveName parameter1=value1 parameter2=value2 ng-if="true"> </directiveName>
Why can't I seem to use ng-disabled?
(The purpose of the directive is to make a connection with a topic and display the messages in the topic, so all it outputs is plain text.)
As per the documentation for ngDisabled:
This directive sets the disabled attribute on the element if the
expression inside ngDisabled evaluates to truthy.
But in your case, it seems ngDisabled will be adding a disabled attribute to an element that does nothing with it.
'disabled' only makes logical sense for elements that allow user input or interaction. Out of the box, it works for form inputs, anchor tags and buttons. If you require 'disabled' behaviour for other things then you need to provide it yourself.
I'm already excluding one input, and it adds the success class (which I don't mind)
$('form').parsley({ excluded: '[data-parsley-sum-total="all"]' });
but there are a number of other inputs that have no validations on them, and I don't want the 'parsley-success' class added on submit. If I add them to the list of excluded inputs, it still shows the 'parsley-success' class after submission. I'm just removing them manually right now on submit, but is there an option to not give them the class in the first place?
Using parsley 2.0.7
Thanks in advance for any help.
Edit:
In case this helps, my inputs I'd like to have the validation show up on are all in a single div like so:
<form id="f">
<input>
<input>
<div id="d">
<input>
<input>
</div>
I'd like to do something like $('#d').parsley() but that obviously doesn't work.
Also, besides using parsley excluded like I mentioned above, using data-parsley-group="" doesn't work for me either, both just exclude from validations, but don't solve the parsley-success problem for me.
Interesting point, it should be easier.
It's not too hard to get what you want though. You can listen for parsley:field:validate event, and toggle a class "no-constraint" depending on if it has constraints or not. A simple tweak to your CSS file will give the result you want.
I have a select div that I'm using the chosen jquery plugin to style and add features to (most notably, search). The div looks something like this,
<select data-placeholder="add a foobar" id="foobar" style="width: 350px;">
<option value=""></option>
</select>
And I'm using the chosen plugin like this,
$('#foobar').chosen();
While some AJAX is loading, I'd like to disable the entire <select> div. Maybe with something like this,
$('#foobar').disable()
or this
$('#foobar').prop('disabled', true)
I think you get the idea.
Any ideas on how to do this? I've tried a number of different things, like using jquery idioms for disabling things, disabling the <select> which just disables the underlying select, not the chosen stuff on top of it. I've even resorted to manually adding another div with a high z-index to just grey out the box, but I think that this is likely to be ugly and buggy.
Thanks for the help!
You are disabling just your select, but chosen renders it as divs, and spans, etc. So after disabling your select you need to update the plugin to make the select widget disabled too. You can try this way:
$('#foobar').prop('disabled', true).trigger("liszt:updated");
//For non-older versions of chosen you would want to do:
$('#foobar').prop('disabled', true).trigger("chosen:updated");
I found the information here
Fiddle
Once you update the widget all it does is it unbinds the click or other events on the plugin and changes its opacity to 0.5. As there is no real disabled state for a div.
In the lastest version of chosen, liszt:updated is not working anymore. You need to use chosen:updated:
$(".chosen-select").attr('disabled', true).trigger("chosen:updated")
Here's a JSFiddle.
PSL was correct, but chosen has been updated since.
Put this after you do the disabling:
$("#your-select").trigger("chosen:updated");
$('#foobar').prop('disabled', true).trigger("chosen:updated");
This works Perfect!!!!
#chosen v1.3.0
You can try this:
$("#foobar").prop('disabled',true).trigger("chosen:updated").chosen('destroy').chosen()
$("chosen_one").chosen({
max_selected_options: -1
});
$(document).ready(function () {
$("#foobar").chosen().on('chosen:showing_dropdown',function() {
$('.chosen-select').attr('disabled', true).trigger('chosen:updated');
$('.chosen-select').attr('disabled', false).trigger('chosen:updated');
$('.search-choice-close').hide();
});
$('.search-choice-close').hide();
});
I have an element that I would like to show only when another form element is NOT disabled.
<input ng-model="myModel">
None of the following work:
<div ng-show="myModel">
This will show if the input is disabled, as long as it has had a value set in the past.
<div ng-show="myModel.enabled">
<div ng-show="!myModel.disabled">
Those props don't seem to exist.
<div ng-show='!angular.element(po.vendor__contact).prop("disabled")'>
Thought that might work to ask jQuery if it's disabled, but it doesn't.
Is there any way to reference whether an element is enabled or not in an Angular directive? Can it be done by asking jQuery?
Thanks!
Fiddle: http://jsfiddle.net/ADukg/3197/
I think your not using Angular the right way. You should not base the visibility of an element based on the state of another element.
Both elements should depend on the model:
<input ng-model="myModel" ng-disabled="isDisabled">
<div ng-hide="isDisabled">
Basically, view reflects the model, don't inspect the DOM, and don't use jQuery. Also you can use ng-hide instead of ng-show and !
Edit: http://jsfiddle.net/ADukg/3198/