I am using angular-auto-complete for an Airports list.
Basically is a list of objects each with the following attributes: name, city, iata, etc. I have two identical "dropdowns", one for Arrival airport, one for Departure.
Inside my controller I can get the attributes of "this" model but I don't know how to store it to be able to output it later.
As it is now the binding is just echoing the text value of the input model, obviously.
Here the code:
https://jsfiddle.net/udkys1eo/8/
From the controller I can do
$scope.arrivalAirport = selectedObject.
But that doesn't make sense since the event is triggered for both auto-complete fields.
Ideally I want to achieve:
thisModel = selectedObject;
{{thisModel.name}}
{{thisModel.city}}
But I don't know how, I have googled and tried for hours.
Thanks, I am new in Angular.
Related
I have seen a similar question, but in my case it doesn't work.
I have a JSON model, called data, which corresponds to a SAPUi5 form with comboboxes. I want to copy the state of the model the first time I open my application and keep it like that. After that I want to use it to reset my form and bring the comboboxes back to their default values.
When I first start my application:
this.getView().setModel(new JSONModel(data)); //create the original model
//copy the original model (copyModel is global variable
copyModel = $.extend({}, data);
Until here everything is fine. The two models are exactly the same. After that I have a button and a reset Function:
resetP: function(){
this.getView().setModel(new JSONModel(copyModel));
console.log(copyModel);
}
The first time I select something in the comboboxes and click the reset button and run the reset function, the copymodel is the right one. Same with the original data model. When I change again the selected value of the combobx, the copyModel, starts taking the selected value. Somehow it's overwritten. I don't know what I am doing wrong. Are there any suggestions? I have also tried to use JSON.strignify instead of extend.
JSON models be default have two way binding. So when you are triggering events like selectionChange on the ComboBox, because of two way binding, the set data to the model keeps getting updated. Also Javascript has objects by reference, so it is the original copyModel object that gets updated.
You can prevent this by setting a copy of the copyModel to the JSON model.
Another thing I would like to mention is that do not keep setting the model again and again.
You can just update the data that is set to the model and update the model.
This can be done in 2 ways.
a.
resetP: function(){
this.getView().getModel().setData(copyModel);
console.log(copyModel);
}
b. You could also update the required property and do a
this.getView().getModel().updateBindings();
We use jQuery.extend(true, {}, object_to_copy); in this way to create a "deep copy" from the object we want an independed copy from.
I hope I can expain myself what I mean.
Let's say I have a car resource. The car has the attributes color, name or whatever.
I get the list of cars using a service, something like cars.index().
But in the interface I have all the cars and when I click on one car, a little popup appears showing the inputs to edit the color and the name.
And here comes the issue. Where do I save the displayingInputs attribute?
Should I save it directly in the car resource and then just send the original attributes when submitting to the updated resource?
Should I create a new service called carWidget or something along the lines that each one has something like:
{
car: cars.get(carId),
displayingInputs: false
}
Should I store the displayingInputs inside a carWidget directive scope? What happens if I need to change the `displayingInputs from the parent scope? (for example when making a "display all"/"hide all" button)
Something else?
My best bet is #3, but I'm not sure how should I access the displayingInputs from outside the widget.
If you want to keep your car model clean, you can have a separate variable editedCar and display each popup with ng-show="car == editedCar".
If multiple cars can be edited at the same time, editedCars can be an associative array (car ID => boolean) and display popups using ng-show="editedCars[car.id]".
Another way not to send certain car properties is to prefix their name with a $ sign. This was simply use car.$displayingInputs. Be careful for name collisions as Angular uses this prefix to store internal data.
From the angular.toJson doc:
Serializes input into a JSON-formatted string. Properties with leading
$ characters will be stripped since angular uses this notation
internally.
I have a global controller in my AngularJS application which provides me with a array containing Attendee objects. Want i want is to modify my CourseRegistration Model which contains one specific attendee object. In the edit window I d like to get a dropdown with all possible attendees whereas there should be the current attendee selected.
I have the following code in my html:
<select ng-model="courseRegistration.attendee" ng-options="attendeeSelectItem.name for attendeeSelectItem in attendeeSelectItems"></select>
If I print out courseRegistration.attendee with JSON.stringify and do the same with the corresponding option they print out the same object (same id, same name etc.). But if I do something like (courseRegistration.attendee == attendeeSelectItem) for the two identical objects, then I get false.
So my question is how can I make sure that the currently selected item (stored in courseRegistration.attendee) gets matched with the corresponding object in my list (which is used by options) ?
Thanks a lot in advance.
JSFiddle: http://jsfiddle.net/2ddCy/
Greets
Marc
Essentially when you use an array of objects to populate a select, it selects the entire object, not just the one item you're seeing in the select list.
See this question for detail and example code: Problems when using ng-options and ng-switch together
I'm assuming that you've got something like the following in your controller?
$scope.courseRegistration = {attendee: {id: 2, name: "A Person"}}
If so, the reason the comparison fails is that although the object may have the same properties as the one currently selected, it refers to a different object in memory and therefore isn't classed as equal.
Now as a quick hack you could stringify them and then compare, however the correct approach would be either to set the current value by key:
$scope.courseRegistration = {attendee: attendeeSelectItems[1]};
Or just store the id/name and set your ng-options condition to bind to just that value:
$scope.courseRegistration = {attendee: 1};
<select ng-model="courseRegistration.attendee" ng-options="attendeeSelectItem.id as attendeeSelectItem.name for attendeeSelectItem in attendeeSelectItems"></select>
( i am using the backbone forms extension to create my forms: https://github.com/powmedia/backbone-forms)
I have two select boxes and when the first is changed it should change the values of the second. I have got the filtering sorted and have an array of objects that need to be used as the new values for the second select box, i have placed these in a new collection.
After ready the documentation i assumed i could do this:
var newProducts = new App.Collections.Products(correct);
form.setValue({ ProductUsed : newProducts});
Where correct is an array of objects, however my select box just goes blank and allows me to select the other options when focused.
Any advice would be great?
Cheers,
Tom
evilcelery shared this fiddle: jsfiddle.net/evilcelery/c5QHr
This resolves the issue i had.
I have a page that has around 30 different entry fields, one of the top fields is a textfield and after this is filled in, I want to populate a dropdown and a textfield. I currently have it calling a javascript function, however my main problem is that I need to query the database to find out what value to populate the fields with.
Here is the type of thing I was trying to do:
function populateState(){
<cfquery name="getState" datasource="#application.dsn#">
SELECT STATE_CODE, CODE_ID
FROM LERG_LATA_V1 LEFT OUTER JOIN Code ON STATE_CODE = CHAR1_TX
WHERE NPX = #NPANXX#
</cfquery>
}
And then after that I would need to read the result and select that element. Any suggestions on how to do this? Most of what I am finding on my google searches are saying you cannot mix cf and js since they execute at different times.
You need to either create a state JavaScript array with your query, and then reference that in your javascript, or use the built-in cfselect tag binding to make this happen. Here's a simple example of how I do this:
http://www.dansshorts.com/post/cfselect-binding-and-selectedvalues
Dan