I have some problem using browser-sync with angular js, here's my question. I successfully sync the click and scroll events with browser-sync, but not the input fields. Although the "text" in the input field is updated, the ng-model bind to the field is not.
For example, when I type "abc" in chrome, the corresponding field in firefox shows "abc" too, but the model value doesn't get "abc" at all, so the next operation in firefox will base on a empty value which leads to a wrong result.
Another example is, I use angular-strap for my dropdown list, when I click a list to collapse in chrome, the list in firefox doesn't collapse at all. I think this is because the click event has been handled by angular-strap so the browser-sync can catch it.
What should I do to make the browser-sync and ng-model works together? Please give me some advises, thank you.
Related
We have created a directive to do a validation of the input/ selected item must be exists in the combo box list. However, it's not working anymore after upgraded the package to 0.18.1 and implement the [allowCustom]="true". It was working in the previous version 0.10.x.
The scenario is when user remove the entry from the combobox and enter a value again, the directive is triggered. But if user, append the content in the combobox, the directive is not triggered at all.
Please help. Video attached
Sample Project is Attached.
This seems to be a bug in the #progress/kendo-angular-dropdowns#0.18.x release.
I updated the demo to the latest official (0.21.x) and it seems fixed:
http://screencast.com/t/xyN8q9kR
I have a number of fields on my form. When the user changes the selected value in a dropdown, there is a hideExpression on each field that shows/hides the fields depending on what the user has selected. This currently works fine.
However, I am trying to make the dropdown default to the first option in the select. This also works fine.
My issue is that all of the hideExpression logic is not being fired upon loading of the screen. So the select is defaulting correctly but none of the fields (that should be shown) that go with that option are visible.
If I manually change the dropdown value then everything is shown correctly. Is there a way to make the hideExpression logic get kicked off even when the select is being defaulted via code?
Here is a JSBin for my issue: http://jsbin.com/doliyiruza/edit?js,console,output
The page defaults to Option2. Yet, there is a hidden field that should show whenever Option2 is selected. So if you change the dropdown to Option1 and then back to Option2...you will see the hidden field. The hide/show logic doesn't seem to get kicked off if you set a dropdown to a certain value by default.
I'm not 100% sure why what you had wasn't working, but querying the DOM in your controller is a very very bad idea. Also, angular-formly intentionally tries to make field IDs non-deterministic so you can't do that (should probably make it more random). Here's what I think you're trying to accomplish: http://jsbin.com/bifaza/edit?js,console,output
I am using angularui bootstrap typeahead module for my project.
I am unable to pre-populate the drop-down with predefined value.
Whenever user click on input text of typeahead, it should automatically show the typeahead suggestion dropdown(from a static JSON).
Whenever user starts typing, then the behaviour should be normal.
I tried this solution but unfortunately it stopped working when I upgraded my angularjs to version 1.3
So I essentially accomplished this by making a custom directive and making a minor modification to the ui bootstrap typeahead code. You have to trick the typeahead into thinking someone has typed something in it. I placed a little pulldown arrow to the right of the field so essentially it looked like a pulldown and clicking on that arrow would show ALL choices. You should be able to do it using onfocus.
Basically find the code in the bootstrap typeahead that binds to the key events and I changed it to check for a keydown event of 40
if(scope.matches.length === 0 && evt.which === 40) { // Added
// COMMENT OUT modelCtrl.$setViewValue(modelCtrl.$viewValue);
modelCtrl.$setViewValue(''); // Added
}
You'll also need to make sure the typeaheadMinLength is set to 0. Note in the code above it checks for the case of the user NOT having typed anything AND the special keydown event that I trigger. You should be able to change this to trigger on onfocus. I copied the bootstrap typeahead to mytypeahead.js and then modified it as above, along with a few other minor mods that you may or may not need depending on if the field is "required" or not.
I have implemented Bootstrap accordion(3.*.*) using Angular JS (1.2.*). Here I have used ui-router to load template when click each item in accordion. its working fine.
But I am getting the following error whenever click any item
Error: [$compile:nonassign] Expression '$state.includes('customers')' used with directive 'accordionGroup' is non-assignable!
I am getting the error in the below line. I have checked the following condition for opening the corresponding item whenever user click browser back button. How can i fix this?
is-open="$state.includes('customers')"
Also, I have checked the above condition in each item for 2 times. one for is-open. Another one for changing glyphicon in the right corner of each item. How can i reduce the code for this lengthy checking?
I want to fix the above issue inside view itself. I don't want to fix this from controller.
Here is a fiddle
I have fixed this issue by assigning the active class in separate variable using ng-init
Working demo
ng-init="customersAccordionActive=$state.includes('customers');"
is-open="customersAccordionActive"
I give input the to a input field which has a jquery ui calendar
id("dateSelecterInput").sendKeys(date);
id("dateSelecterSubmit").click();
When you enter something in a input field the calendar pops up, as it should, but when then cover the submit button which is below the input field. The problem is that for Webdriver it cant click the submit button, probably since its not visible ?!?
The problem can be solved be clicking a other element, but its a hack, how to solve it proper?
We use date pickers all over our production site . After clearing the date field and sending keys, can't you press the return key to get the same result , instead of clicking on the button?
if pressing return is not an option, then , yeah, modify your css so that the button is always visible. selenium works the same way an end user would see the site, so.