I am using this http://jsfiddle.net/moinsam/SDPHm/light/ for getting location.
<input id="searchTextField" type="text" size="50" ng-model=show.location>
<button class="button button-full button-assertive" ng-click="sendReshedule(show)">Reshedule</button>
$scope.sendReshedule = function(data){
console.log(data);
}
I am searching location using the input box and when the list appears I select one location
But the problem is that the letter I have typed in the textbox I can access that only in the controller but not the actual selected location.
I am not able to access the selected location.
For Example.: I typed "cal" and I get a list of suggestions.Now I select "california Los Angeles".
This selection gets display in the input box but when I am trying to access the text of input box I am not getting full value, I am getting only "cal"
one quick fix is console.log(document.getElementById('searchTextField').value);
vl keep looking other ways.
Reason : Angular binds show to ng-model then show gets value as cal when u type, but when google maps javascript updates it's value ie california which is not a angular part , angular doesn't know that it has to update it's show ng-model value , so u get it as cal , for this we use $scope.$apply() however recent angular fixes it with monkey patch.
vl try to post a working piece of code , hope this helps
other way for this is to create a custom element: working fiddle for this approach
Related
I build some form analogously to:
http://tutorials.jenkov.com/angularjs/forms.html
It means that I also use ng-model as chosen value. These values are retrieved from database - there are multiselect options.
<form>
<input type="text" name="firstName" ng-model="myCtrl.firstName"> First name <br/>
<input type="text" name="lastName" ng-model="myForm.lastName"> Last name <br/>
</form>
Controller {
constructor() {
this.firstName = getFirstNameFromDatabase();
}
}
It is sketch of my code - I wouldn't like to show it here.
It is working ok - values are retrieved from database and displayed as proposition in form.
My issue is following:
Let's assume that someone type in this form "abc". Then, someone click button next (it direct to another state, user is directed to another view - lets denote it X).
User can return from X view with back button. I would like to display "abc" (so my app should memorize chosen values).
However, if user type value "abc" and return to menu (or another else state (view) - different from next button) - in this case value shouldn't be memorized.
Can you give me some clues ?
Since you're actually switching pages in your application, you're going to have to put their content in some sort of persistent storage. A couple ideas pop into my head.
Temporary Browser Storage / Cookies
Server-side storage in a Database or Cache
Either way, you'll need to store the data whenever the user manipules the values. And when they switch pages, choose whether to clear the data or not based on whether it's your special view.
Or another idea is to use an angular function to change the url (rather than a simple anchor). Then in that function you can persist the data before switching to your view. But if they go to a different page, it won't get saved. This only works if they navigate based on your page's links.
Usually this sort of thing is accomplished using a single page which includes both your original view and the next view. You can swap out the content using JS so the user doesn't know the difference. So that's still an option too.
I have a requirement to open a modal on click of input box. Modal contains list of countries with search bar, once modal is open it searches for text picked from input and shows filtered list. Now user can search for different country and select from filtered list, modal closes and value is added to input field. In code,
openCountryPickerModal($event) {
let modal = this.modalCtrl.create(CountryCodePickerComponent, {"searchValue":$event.target.value});
modal.onDidDismiss(data => {
if(data){
$event.target.value=data.countrySelected;
// Here: the value set to $event.target.value is not updating to input box's model emergencyContactInfo.currentPersonalAddress.country
}
});
modal.present();
}
and in template
<ion-input (click)="openCountryPickerModal($event)" [(ngModel)]="emergencyContactInfo.currentPersonalAddress.country" type="text" placeholder="Country" readonly></ion-input>
Now the problem is, though it appears value is changed in UI, but never updates value to model. Any special reason?
I tried many ways to solve this but nothing works and I appreciate help if any.
I am trying to create exactly same form given in this fiddle
steb by step angular form
but whenever i click on the next button data entered in the first step resets.. how can i prevent this? On submit all data is undefined while reading in javascript.
Please help me..
In the JsFiddle code you provided you are not retaining the users data, meaning that data is being Binded to anything in the controller. So when leave the section the data is removed.
To retain data make the following changes:
// In your controller add the following object to the $scope
$scope.user = {}
// In your HTML code add the following to your input fields
<input type="text" id="teamName" ng-model="user.teamName" placeholder="Team Name" />
Notice the ng-model tag in the input field this is what binds your data to the user object within your controller
Heres a working JsFiddle, please note that I only updated the Team Name field. Type something in the Team Name field and go to the next section and it will retain your data. You will need to update the remaining fields.
The application I am working on has multiple tabs, each tab contains a form with ng-submit. And they share some common fields for example: selectedService.
It's been set to required in both forms. However updating it in one form then switch to another form, Chrome wouldn't complaint it's required since it already has value, however IE 11 complaints that it's required although it already has data entered and angular indicates that it's valid as well.
Is there anyway that I can update IE to let it know that this model has been updated and it has value? Or it's the form needs re-validation?
---------------------Update--------------
I am finally able to replicate it: http://plnkr.co/edit/Gjphya?p=preview
So if you select a value in the first dropdown and click submit in the second row, it says it's required. This only happens in IE, not in Chrome or other browsers.
And I think the problem is around this line:
$scope.selectedService = null;
Thanks!
All I need to fix is to add this line in the select tag:
<option value="">Please Select...</option>
If I init the ng-model in controller, it also fix the issue, however sometimes it causes unexpected issue if the dropdown is binded to an array instead of object collection.
I have a simple select. When I select the last element in the array the input remains blank, if I then select that element again the text then appears in the input. It only happens if the last element in the array is selected the first time after refresh, all other cases work as expected.
<select ng-model="bib.raceDistance" ng-options="raceDistance for raceDistance in Data.defaultRaceDistances" ng-required="true"></select>
Data is set in a constant module
angular.module('core').constant('Data', {
defaultRaceDistances: ['5km', '12km', 'Half Marathon', 'Marathon'],
});
The bib variable is set in the controller.
$scope.bib = {};
Why is marathon not showing up the first time it is clicked?
Thanks.
try using: option with ng-repeat
<select ng-model="bib.raceDistance">
<option ng-repeat="raceDistance in Data.defaultRaceDistances">{{raceDistance}}</option>
</select>
I think it was just the bootstrap template I was using was not playing nice with Angular. When I went back to default bootstrap everything worked fine.
With material design templates they want you to use a different element.