So I'm being cracking my head at this issue for quite some time and I'm stumped as to why the code is behaving as such.
So I'm using the following in my project:
AngularJS v1.2.22
Bootstrap v3.1.1
jQuery v1.5
Scenario:
I have 2 select dropdown's where the values are retrieved from the DB using angular (working), on the UI aspect I have to disable the 2nd dropdown based on the first dropdown's value (selected) also works (used scope.watch), but it fails only on the first time i.e. based on the default values set, it doesn't disable it.
Actual:
On load first time based on the default value the 2nd dropdown should be disabled but its not
Excepted:
It should get disabled
This is what stumps me,
I have got it to work using ng-disabled="dropdown2" and the angular side $scope.dropdown2 = true;
This disables the dropdown but, the CSS doesn't work.
IfI change the above to ng-disabled="{{dropdown2}}" and the angular side $scope.dropdown2 = 'disabled';
Then dropdown doesn't get disabled but, the CSS works.
Code
AngularJS
$scope.$watch('formItem.dropdown1',function(newValue,oldValue){
if(newValue.cd==='A' || newValue.cd==='B'){
//$scope.dropdown2= 'disabled';
$scope.dropdown2= true;
$document.find("#eldropdown2").next().addClass('disabled');
$document.find("#eldropdown2").attr('disabled',true);
}
HTML
<div class="col-lg-7" >
<select class="form-control" id="eldropdown2" ng-model="formItem.dropdown2" ng-options="c.valueForDisplay for c in dropdown2" ng-disabled="dropdown2" paCombobox></select>
</div>
Can anyone help me figure out why AngularJs/Js does this ??
EDITED
My colleague helped me fix this issue my adding the following line in the JS
ANGULAR JS
$scope.dropdown2= true;
$scope.$watch('formItem.dropdown1',function(newValue,oldValue){
if(newValue.cd==='A' || newValue.cd==='B'){
$scope.dropdown2= 'disabled';
// $scope.dropdown2= true;
$document.find("#eldropdown2").next().addClass('disabled');
$document.find("#eldropdown2").attr('disabled',true);
}
HTML
<div class="col-lg-7" >
<select class="form-control" id="eldropdown2" ng-model="formItem.dropdown2" ng-options="c.valueForDisplay for c in dropdown2" ng-disabled="{{dropdown2}}" pa-combobox></select>
</div>
Above scope.watch, But how did it work ?? clearly this is a hack right ?? I mean since ng-disabled="{{dropdown2}}" will accept el-value and not boolean value right but how does it work ??
Also upon further investigation I came across this piece of code in the JS side
app.directive('paCombobox', function () {
return function (scope, element, attrs) {
scope.$watch(attrs.ngModel, function (value) {
element.selecter('destroy');
if(scope.disableEle || element.attr('ng-disabled')==='disabled'){
element.selecter();
element.selecter('disable');
}else{
element.selecter({
inputFilter:true
});
element.selecter('enable');
}
var tabIndex = element[0].tabIndex;
if(tabIndex != -1){
element.parent().find('div.selecter')[0].tabIndex = tabIndex;
}
});
};
});
Can anyone tell me Why and how this works?? and what is the best practice to follow, clearly the above seems like a hack and it shouldn't work right ??
I have two initial ideas for you to try,
At the end of the $scope.$watch maybe try adding a $scope.$apply()? It could update the DOM to inform it of the needed css change.
The other idea I would have would be to use an ng-class and query for dropdown2.
ng-class="dropdown2?'class for dropdown2 == true':'class for dropdown2 == false'"
Instead of adding the class try to use the attribute disabled:
<select disabled id="eldropdown2" ng-disabled="dropdown2"></select>
And then with angular remove the attribute instead of the class.
Related
Hi I am new to AngularJs. Here my problem is on a certain condition I need to disable my multiselect dropdown.
So, I made the logic and on with the help of I tried to disable the dropdown-
document.getElementById("multidropdown").disabled = true;
But no luck.
So, then I google it and get to know about ng-disable. So, I put a ng-disable there and give it a name like this
ng-disabled="makeItDisabled"
And in my js file, I set
$scope.makeItDisabled = false
And in the condition, I made the same
$scope.makeItDisabled = true
But still got no luck.
This is my HTML-
column type="dropdownMultiSelect" styleName="form-control ng-isolate-scope multidropdown" ng-dropdown-multiselect="" options="dropdownData" selectedmodel="dropdownelect" extrasettings="multiselectsettings" events="DropDown_changed" text="" uniqueID="multidropdown" ng-disabled=" makeItDisabled
This is my js code which I have tried
document.getElementById("multidropdown").disabled = true;
and also
$scope.makeItDisabled = true;
I did the same with the disabled also but there also I was not able to do it. I want to know where I am getting it wrong.
I am using this
https://github.com/dotansimha/angularjs-dropdown-multiselect
Finally I was able to do it by just using css
I disabled the dropdown by using
pointer-events:none;
Try this:
<ng-multiselect-dropdown
[placeholder]="' '" [data]="myList"
[(ngModel)]="mySelectedItems" [settings]="mySettings"
(onSelect)="onItemSelect($event)" (onDeSelect)="onItemDeSelect($event)"
(onSelectAll)="onSelectAll($event)"
(onDeSelectAll)="onDeSelectAll($event)"
[disabled]=!isToDisable()>
</ng-multiselect-dropdown>
Use ng-disabled not ngdisabled and it should work. Post further if you have any queries
I'm using a JQuery + Bootstrap keyboard that is configured specifically only for touch inputs in my Angular app (If i use the mouse to click on the keys, keyboard will close without typing any. It is written to close on on click events).
Mobile-first-Virtual-Keyboard-Plugin-With-jQuery-Bootstrap
My problem is when i enter something to an input box whcih is binded to my controller using ng-model like the following code,
<input autocomplete="false" class="textInputSeeThrough keyboard"
ng-model="patientNIC" type="text" id="nic"
name="patientNICTxtbox" autofocus
placeholder="--- ENTER NIC NUMBER ---">
it does not get binded properly. But if i use plain javascript to traverse the DOM and get the element value in my controller instead of using $scope to get the value, i can get the value properly.
var val1 = $scope.patientNIC; // this doesn't work
var val2 = document.getElementById("nic"); // this works
alert(val1);
alert(val2.value);
So it is clearly not something wrong with the Keyboard. Does angular js have any known problems working with touch events? I couldn't find any. Can someone explain me why this is happening? Thanks in advace.
Simple answer is: Angular doesn't know about changing in input. Every change must be wrap in $apply or $timeout.
Look at this
Update Angular model after setting input value with jQuery
No Need to worry about, set values to input element using jquery / Javascript .
Please paste the following script in your html block / js (jquery)
!function (n, t) { "use strict"; var r = n.fn.val; n.fn.val = function (n) { if (!arguments.length) return r.call(this); var e = r.call(this, n); return t.element(this[0]).triggerHandler("input"), e } }(window.jQuery, window.angular);
Even we don't need to reassign values to ng object / trigger the input individually.
cheers !
I'm trying to do a search with product results using AngularJS. I've obtained an JSON object with my results": example below
[{"store_id":"17","user_id":"29","company_name":"Liquor R Us","company_type":"Alcohol",
"phone":"(303) 555-5555","website":"http:\/\/liqourrus.com","address":"5501 Peoria St",
"address_2":"","city":"Denver","state":"CO","zip":"80239","lat":"39.796181",
"lng":"-104.84863","mon_open":"","mon_close":"","tues_open":"","tues_close":"",
"wed_open":"","wed_close":"","thurs_open":"","thurs_close":"","fri_open":"","fri_close":"",
"sat_open":"","sat_close":"","sun_open":"","sun_close":"","distance":"1.1668156112981596",
"s":"s","st":"Every Store"}]
I'm using ng-repeat="store in storeResult" and the results will not display until I click on my Filter function, please note the filter is not applied!
<div class="product" ng-repeat="store in storeResult">
{{store.company_name}}
</div>
ng-click="setFilter('all');"
$scope.setFilter = function(filter) {
if(filter == 'all') {
$scope.searchProduct.product_type = '';
$scope.searchStore.company_type = '';
}
}
If I click the "setFilter" button, all results show. I'm trying to figure out how to make it display without having to click the button.
This work around only works in Chrome. Firefox and IE, never display results.
Plunker: link
My best guest is that by clicking the setFilter button you are triggering a digest cycle and your ngRepeat will be executed because of that. I suspect that you are assigning your storeResult outside the digest cycle and that's the reason is not displaying initially. I cannot tell for sure because is not in your description how is that JSON assigned to your storeAssignment .
Can you check how is that variable assigned?
Can you change the way it's and do this:
$timeout(function() {
$scope.storeAssignment = _your_json_value;
});
You will have to include the $timeout dependency but with this, a change in storeAssignment will be inside your digest cycle and the ngRepeat will see that change.
Hope that helps.
It looks like you're not setting the filter to 'all' until you click the filter function. Make sure that filter starts out as 'all'.
I have a drop down select tag like so :
<select id="thisDropDown" onChange="doSomething()">
<option></option>
<option>classif</option>
<option>status</option>
</select>
Notice I'm using the onChange();
What I need is the ability to re-click an option in my drop down so it runs the function again (as I can change other drop downs which affect the outcome of running this function).
I have tried onselect() and onclick() but none seem to work. Do I have to write a bit of script ? I have been looking online but can't seem to find something that will work.
Thanks in advance, sorry if something similar has been asked before
We can achieve this but with minor tweaks which are required based on the browser
JSFiddle link https://jsfiddle.net/0kxe6br7/2/
var dom = "select#thisDropDown";
var is_firefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
if(is_firefox){
dom+=" option";
}
$(dom).on("click",function(event) {
console.log($(event.currentTarget).val());
});
Hej,
This can be done with jquery
$('#thisDropDown').on('mouseup', function() {
alert('select option');
});
I have googled and looked throughout the whole documentation and could not figure out why value of input text is not shown. I am using FireFox latest version and below is what I have done so far.
<input name="amount" class="easyui-validatebox" id="d_amount" value="">
In regular html or php page we can give value="300" to set default value, but in EasyUI, it is not possible. So I was thinking possible alternative like below:
<script>
var m = '300';
document.getElementById("d_amount").value.innerHTML=m;
</script>
Nothing is shown and I am not getting any error. Any EasyUI expert, please help me.
NOTE: this input field is inside the dialog
To set the default value, you have to set the value attribute. However, that does not necessarily update the value property so you need to do both. So given:
<input name="amount" class="easyui-validatebox" id="d_amount" value="">
set the default value by setting the value attribute:
var input = document.getElementById('d_amount')
input.setAttribute('value', 'whatever');
now set the value property:
input.value = 'whatever';
Note that you can also get a reference to the input as a member of the form that it's in:
var input = document.formName.d_amount;
Use the below code
$("#d_amount").numberbox({
min:0,
precision:2,
value:300
})
Reference : numberbox
Or try this one
$("#d_amount").textbox({
buttonText:'Search',
iconCls:'icon-man',
iconAlign:'left',
value:"300"
});
Reference : textbox
use this code to set the value inside $(document).ready(function(){}
....
$("#d_amount").numberbox('setValue','300');
....
if still not working, just try to set name and id as the same name and id
<input name="d_amount" class="easyui-validatebox" id="d_amount" value="">
I am always working with this numberbox and it's working
I have found your thread because I am also having the same issue and I have just across this thing today. Your case is a little bit different (maybe) then my case because you want to set the default which can be changed by the user later (I believe). In my case, the value will be fixed (will not be changed) so I have applied a trick and hopefully it can give some ideas to you and others who are having same issue. Please refer below:
In first page says pageA.php:
<select name="myThing" id="myThing">
<option value="Your Desired Value" selected="selected">Something</option>
</select>
Still in the same page, under your $(document).ready( function(){ put the code below:
$("#myThing").val($("#myThing option:first").val());
That code is to make sure your desired value appears at the first row in the drop down. I say this because in EasyUI it seems when I use drop down and put single option, the first row will be blank and the second row will hold your input. So that is the trick to ensure your desired value appears on top and selected. Put the select under the form then during normal post, you will be able to get the value of it in the posted page. Enjoy. Thank you.
Suggestion: if your value can be changed by user, use placeholder and you can hide the default value from user using my trick.
try this
document.getElementById("d_amount").value=m;
you don't need innerHTML
I found the answer here. The trick is to use the code inside $(function(){});
$(function(){
var m=300;
$('#d_amount').textbox('setValue', m);
});
I too had this problem and it was solved using the following
First my input was in the form like this:
<input name="hostFirstName" id="hostFirstName" class="easyui-textbox">
I needed to load content from the db then pre-fill the input with this data so the user could edit the content.
I used the following javascript.
NOTE: i didn't hide this away inside an anonymous function() and it is working. I tested this first from the F12 console to make sure it was working before changing my code.
//populate with existing data
$('#hostFirstName').textbox('setValue', "Is this working?");
The docs on jeasyui.com don't provide this example when you look at the textbox api reference. But they do provide an example when looking at the combobox (http://www.jeasyui.com/documentation/index.php#) the combobox and textbox use the same setValue method.
Hopefully this works for you like it does for me.