My app has two models Url and UrlType and I want to select UrlType via select box. How do I do that?
Here is the jsbin where I tried to reproduce the scenario, though this.get('store') do not work :( But the idea must be pretty clear.
http://emberjs.jsbin.com/nefas/6/edit
Few things with your jsbin.
this.store din not work as you have not mentioned your adapter like this
App.ApplicationAdapter = DS.FixtureAdapter;
You din not return in the model return.
Though you have got around what you wanted, I have made a jsbin that might have what you want. http://emberjs.jsbin.com/saxuy/1/edit
Update
http://emberjs.jsbin.com/saxuy/6/edit
You could set the url_type attribute of your url model directly like this in your template.
{{view Ember.Select content=urlTypes optionLabelPath='content.caption' selection=url_type}}
If there was a url_type set for the model, it will be the selected option.
Looks like your logic is working just fine
http://emberjs.jsbin.com/nefas/12/edit
Related
I am going to describe the need, I hope to make myself understood: I need to use several forms for users, according to the form filled in as a type of user, in my user model I use the id of another table for role management.
in the html try to insert something like this:
value="9"
However it does not work, I'm using angular and the backend is developed in .Net Core.
If I understood your intention-
Why do not you use Form-group, with form control?
Where you can enter a default value, like this-
fb.group({
yourControl: [0] // '0' is the default value
});
Hope this helps you, and that I understood what you mean.
I am trying to figure out how to generate list of option elements using ng-repeat, but one of them to be marked as the selected option on load.
After googling, what I found is this base, which I modified by adding the selected property to the data objects
https://plnkr.co/edit/7g4MeAQnG4PzpnrebBGc?p=preview
However, it seems that ng-selected="option.selected == true" has no effect :(
Why? I also have the more complex example here: http://jsfiddle.net/ej5fx3kr/14/ which works, although I am not sure what is the difference, or what is the model here used for (note: changing the model name from "program" to anything, it still works... so not sure what is the purpose).
Bonus points: How do I debug code in AngularJS in directives? Like experiment in debug mode line by line to actually see what are the variable values in that particular scope, what is available to use, etc...
My ultimate goal in this question, is to load list of values via ajax on page load in the controller, IF there is a routeParam in the URL, find it in the list of loaded values, and add selected attribute, then set selected=true in the generated HTML on page load, otherwise not pre-select anything in the populated select box on the page load, so this is why its important for me to understand this on the simplest example before trying to plug this in.
Thanks!
The "Angular Way" to handle this is to use ng-options instead of ng-repeat, and then simply set the model equal to the default value on controller load.
For example:
<select ng-options="option.name for option in data.availableOptions"
ng-model="selectedItem"></select>
$scope.selectedItem=$scope.data.availableOptions[2];
For a more advanced case, where your ng-model might not be the object in the array, but a single property, you can use a modified version of ng-options:
<select ng-options="option.id as option.name for option in data.availableOptions"
ng-model="selectedId"></select>
$scope.selectedId = '2';
Here is a modified version of your plunker showing these different possibilities: https://plnkr.co/edit/xzYmXf8C3WuZaelwj5hO?p=preview
Using ng-selected = true inside ng-repeat would solve this .
However be sure of the data that you call in ng-repeat.For additional debugging and experiment line by line use chrome debugger .go to source tab and set break points on the js lines that you need to debug.This will let you debug line by line by pause and play . Hope this helps.Thanks
I have a problem with AngularJS model. Currently I have two select tags and I fill it by some async action then I just set select tag model by received data. Everything works well but if I change select tag (option) manually then model can't be changed anymore by this async actions - script keeps model picked by me manually - I am sure that I assign proper data to model from server response, because it works untill I don't change it manually...
<select ng-model="sModel" ng-change="changeAction(sModel)" name="sList" id="sList" ng-options="s.name for s in sList track by s.sId"></select>
(second select looks like above).
If someone have some idea why ngModel can't be updated after manual changes, please reply :)
You must be using ng model with direct variables. When using ngmodel with html input types use object types in ng model else value does not reflect.
$scope.req={value:""};
in html use
<select data-ng-model="req.value"></select>
Weird but I fixed it - It was because 'select' was wrapped by div which had ng-controller. Controller contains actually one action with change select option. After remove this ng-change it didn't help but removing whole controller declaration did..
<div ng-controller="sController">
<select ng-model="sModel" ng-change="changeAction(sModel)" name="sList" id="sList" ng-options="s.name for s in sList track by s.sId"></select>
</div>
Someone can explain me this anomaly ? ;/ Model always was changed in main/common controller (parent) where also was initially created.
http://jsfiddle.net/nkr33bo0/
So I have to collect a date and time from the user. I want to be able to set both from a single picker. I found this nice one by curious solutions here. Our site uses jQuery, jQuery mobile, and Knockout. When I use the datepicker to select the date my knockout binded variable is not updating, even though the value of the input box has changed. If I use jQuery to get the value it shows up just fine.
So my question: Can someone help me figure out how to get my knockout binding to update?
I've already tried setting the valueUpdate to input, and afterkeydown with no luck.
Here is a link to a fiddle I made that demonstrates the problem: http://jsfiddle.net/TrueEddie/eg6zM/
In the plugin, when the value of the element is set it needs to trigger the change event.
Something like:
_setValueOfElement: function(sElemValue)
{
var dtPickerObj = this;
var $oElem = $(dtPickerObj.dataObject.oInputElement);
if(dtPickerObj._compare($oElem.prop("tagName"), "INPUT"))
$oElem.val(sElemValue);
else
$oElem.html(sElemValue);
//ADDED THIS LINE
$oElem.change();
return sElemValue;
},
The plugin doesn't seem to have any eventing built-in, so doesn't look like there is a good way to react to the value being set otherwise.
I have an emberJS object, viewed by an editablefield view, in order to be able to edit it with bindings.
I modify the view in order to be able to replace links in the text.
My problem is that if I use the inside views (Zs.RealValue) render function, it won't refresh on each update, like the simple {{value}} would do, only if I erase the text and after erase the first change.
I have a simple example here:
Steps to do: double click on one of the edit fields, the edit box appears, try modify the value, you will see, that the simple view is being updated, but not the other text view.
http://jsfiddle.net/symunona/hCjEc/7/
The problem appears because you try to implement the render function yourself in RealValue. If you change RealValue to just this:
Zs.RealValue = Ember.View.extend({
template: Ember.Handlebars.compile("{{value}}")
});
then the example works.