I have a form with a few listbox loaded from a service: most of them are working correctlty, but 3 have a problem: the list is populated correctly, the ng-model variable is set correctly, but the the item is not selected.
Checking with batarang found this:
<select class="required form-control ng-pristine ng-valid ng-touched" data-ng-options="tipoVia.id as tipoVia.descrizione for tipoVia in vm.tipiViaEdit" data-ng-model="vm.recordSelect.tipoVia" data-ng-change="vm.filtroTipoViaEdit()">
<option value="0" selected="selected" label="(--)">(--)</option>
...
<option value="62" label="SVINCOLO">SVINCOLO</option>
<option value="63" selected="selected" label="TRAVERSA">TRAVERSA</option>
<option value="64" label="TRAVERSA DI">TRAVERSA DI</option></select>
...
for same strange reason looks like that two items are flagged with selected: do you know when this may be happens? I have looked a few times but I don't understand how I can do this.
Update:
After the call to the server to receive the data, I set the options and compare with the model to see if is found in the array, and the value is found
this.tipiViaEdit = data.tipiVia;
this.tipiViaEdit.forEach(myString => {
if (myString.id === this.recordSelect.tipoVia) {
alert("value found");
}
});
Luca
finally I found the problem and I share to solution hoping may be useful for others: in the page I'm using a grid to show a list of objects, and selecting one of the rows the object is used in the editing form.
Looks like that the problem was that the same object is bound both to the grid and to the components in the form, giving different result with differents properties: some of the fields in the form was bound correctly, others not.
I rehydrate the object from the server, downloading a new one along with the list components and this way the form works.
Related
Sorry for asking this question again. but I'm new to angularjs. my que is...
I have five drop downs which are loading from json using angular js(ng-option). now I need that if user selecting value in one drop down that same value should not appear in another four dropdowns.
I really want solution. I search a lot and practice more and more but. Couldn't find any solution. Plz plz plz help me.
I'm not sure if I've got your problem right, but I would try to create an array, let's say $scope.selectedOptions. And then on select push the value to this array. After that you can filter the options in other dropdowns with lodash for example.
here is the solution that you can apply in easy way.
one model you sending to other select.
<select ng-model="countryList"
data-ng-options="countryList for countryList in countryListArray" ng-change="getStates(countryList)" >
<option value="" disabled selected>-- Choose Country--</option>
<select ng-disabled="!countryList" ng-model="stateList"
data-ng-options="stateList for stateList in stateListArray" ng-change="getCities(stateList)" >
<option value="" disabled selected>-- Choose State --</option>
</select>
you need to add below code in your dropdown elements so as to avoid recursive calls to all three of your dropdowns during change in ng-model values.
ng-model-options="{ updateOn: 'change', debounce: { change: 0 } }"
Also there is a function which updates data object of your $scope.records array. Please take a look at this fiddle. I think this is what the specific thing is which you wanted.
I'm using two controllers here. One, productComponentsController, handles a call to our database that pulls back an array of productComponent objects. The other, AddEditArticleController, controls the 'Create New / Edit Existing Article' page.
On my Add/Edit Article page, I want a <select> to populate with productComponents, and, if I am editing an existing Article, to be pre-selected with that Article's current productComponent.
Simple as this seems, I cannot make the field pre-select with the existing productComponent, though it does populate the <select> with them correctly. I've tried ngRepeat and ngOptions and both work for populating the dropdown, but neither works for pre-selecting the existing productComponentID from the array returned by the server.
My HTML, using ngOptions:
<!-- productComponentsController as pvm, AddEditArticleController as vm -->
<select id="componentBox"
ng-model="vm.selectedComponent"
placeholder="Select a Product Component"
ng-change="vm.changeProductID()"
class="form-control input-md"
ng-options="component.name for component in pvm.productComponents track by component.id"></select>
My HTML, using ngRepeat:
<!-- productComponentsController as pvm, AddEditArticleController as vm -->
<select id="componentBox"
ng-model="vm.selectedComponent"
placeholder="Select a Product Component"
ng-change="vm.changeProductID()"
class="form-control input-md">
<option value="{{component.id}}"
ng-repeat="component in pvm.productComponents"
ng-selected="vm.selectOption(component.id)"
ng-bind-html="component.name"></option>
</select>
<!-- vm.selectOption() returns true if the current option's ID equals the productComponentID of the current Article. Therefore this option would be selected. -->
In my AddEditArticleController, I set vm.selectedComponent equal to the productComponentID of the Article that was returned by the database, in the promise.then() of my call. While vm.selectedComponent does change, this doesn't do anything to the dropdown.
Also, in my generated HTML, I get the option: <option value="? number:47 ?"></option> (for an Article where the productComponentID is = 47). Apparently this happens as a result of the model being set to an unknown value but I don't know why the model would be set to anything other than an integer id.
Is this because my select is accessing multiple controllers, or am I missing something obvious here? Any help is greatly appreciated, let me know if more info is needed.
I believe you're looking for ng-init...
<!-- productComponentsController as pvm, AddEditArticleController as vm -->
<select id="componentBox"
class="form-control input-md"
placeholder="Select a Product Component"
ng-change="vm.changeProductID()"
ng-model="vm.selectedComponent"
ng-init="vm.selectedComponent=productComponentID"
ng-options="component as component.name for component in pvm.productComponents track by component.id"></select>
So it turns out that because the model has to be a string, I have to cast the vm.selectedOption to a string whenever it's changed (in this case, in the vm.selectOption function) using String(). This is using ngRepeat. ngInit seems to have no bearing on how my code works.
Boom, that's it, and my code works.
Not sure if there's a workaround for this, I'm doing something wrong, or this is a collision between simple form or angular, but:
.field
= f.input :role, collection: roles.map(&:name), selected: user.role.try(:name), include_blank: 'Select', required: true, input_html: { "ng-model" => "role" }
renders (which looks correct):
<select ng-model="role" class="select required" name="user[role]" id="user_role">
<option value="">Select</option>
<option value="system">system</option>
<option selected="selected" value="fcm">fcm</option>
<option value="regulatory">regulatory</option>
<option value="operations">operations</option>
<option value="help_desk">help_desk</option>
</select>
But the selected value is the include_blank value of 'Select'. And yes, role is set on the user.
The reason it's doing this is because of the way angular models work and it requires an understanding of this. Essentially the ruby generates the select correctly choosing the selected option of the select box too.
However, once the angular is loaded and sees ng-model on this select it sets the current selected option to the value of the model, in your case, role.
Thus if you want to have an angular model for this select, you need to set the initial value of that model.
Try the following:
.field
= f.input :role, collection: roles.map(&:name), include_blank: 'Select', required: true, input_html: { "ng-model" => "role", "ng-init" => "role = #{user.role.try(:name)}" }
Note that the selected option has been removed entirely since this will be controlled by the Angular model, which is initialized to that value using ruby string interpolation.
I thought for a moment on this particular example and I am not quite sure what you expected to happen with the result.
Although, I assumed that you want to have option with attribute selected="selected" selected as a default value, instead of value="", which is only a blank field. If that I understood correctly and this is the point, that means there are several fields, which might be incorrect and We (the community) do not know how you completed them, but I think I dug up for the problem... ;)
Angular directive - At first, I do not know which version of angular you used in the example (I assume 1.X, because question have 6 months from this moment). The AngularJS select directive overrides the default behavior of select element and change it a bit.
I prepared a simple example with Angular v1.0.1 for the tests and it looks behave correctly in few aspects. If you use ng-model="role" and set the role to fcm (String), like $scope.role = 'fcm', the angular is obligate to set this value if it will find it.
I have also tested (AngularJS v1.0.1) what if the role is not set (undefined), then angular also point on empty string value like value="" and it not see into attribute selected and not set it as default. In the other side, the latest stable AngularJS v1.5.6 does support selected attribute example with AngularJS v1.5.6, so it might be the core of the problem.
Well, the solution for this is simple:
upgrade AngularJS for the latest 1.X version or
consider to use
ngSelected
or ngInit/SO
solution instead if the version AngularJS you used support that.
I'm trying to get my protractor E2E tests to interact with a drop down menu.
In the page that I'm testing, we have a drop down for countries. The dropdown contains 4 selectable options "?" which is blank, and then US, UK, and Canada.
I'm obviously not calling the element correctly within my PO file, as the parameterization is not working. The tests "pass", however when you watch what is being driven, the country that is selected, is the "?" one(which is default). So the test is navigating to the page, selecting the element and not actually clicking on the option that I'd like.
From what I can tell, I need to somehow get the parameterized option that is inputed from the spec file to the element however i'm not really sure if this is possible.
What am I missing/doing wrong?
Spec file:
campaignPO.clickCountryLocation('US');
PageObject file:
this.countryType = by.css('select[ng-model="country"]');
this.clickCountryLocation = function(button) {
element(this.countryType).click(button);
};
Here is the element were working with:
<select class="form-control input-sm ng-pristine ng-invalid ng-invalid-required"
ng-size="11"
ng-model="country"
name="country"
ng-options="opt.value as opt.label for opt in countries"
ng-change="updateCountry()"
required="">
<option value="?" selected="selected" label=""></option>
<option value="0" label="US">US</option>
<option value="1" label="UK">UK</option>
<option value="2" label="Canada">Canada</option>
</select>
I'd use a select-option abstraction suggested here:
Select -> option abstraction
Example usage:
var SelectWrapper = require('select-wrapper');
var mySelect = new SelectWrapper(by.name('country'));
mySelect.selectByText('US');
First of all, you can simplify your select locator by using
var selectEl = element(by.model('country'));
I am not sure the attribute css works very well. To select options:
var optionEl = selectEl.element(by.cssContainingText('option', 'US'));
optionEl.click();
If you are just trying to open the select without selecting a value, don't. Selects are HTML components and you don't want to test them in this way. Even working with them in javascript is cumbersome. If you want to see what values are in there, list the option elements.
I'm trying to display different server's id in a custom selectpicker. The selectpicker works fine if the options tag are "hard coded" but not when I try to retrieve them from a json file (the json is good since the same works with a table in the same page).
Working:
<select id="bs3Select" class="selectpicker show-tick form-control" multiple data-live-search="true">
<option>cow</option>
<option>bull</option>
<option class="get-class" disabled>ox</option>
</select>
Not working:
<select ...ng-model="selected" ng-options="project.idproject as project.idserver for project in projects">
<option value="">-- YON --</option>
</select>
The weird thing is that for each hard-coded option in the second case (like "--YON--" here), when I click it, the server's id corresponding (meaning, if I have two options, the second server id in my json is corresponding to the second option) is displayed in the select!
I tried quite every syntax I have seen on the web but still not working...
Someone has an idea?
I've made a simple plnkr for you http://plnkr.co/edit/2SbSwL05nx5Ta8KevEDC?p=preview
that is working, can you maybe post a sample of that JSON is it object of objects or array of objects?