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?
Related
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.
enter image description hereenter image description hereI am working on a Salesforce application and am trying to choose a value from a drop down for my test case but I keep getting a NoSuchElement exception.
I tried to identify the object using its ID
public void enterStep1Details()
{
WebElement element = driver.findElement(By.id("pageid:theform:Block:NewHireRequisitionId:hm:HiringId"));
element.sendKeys("C");
}
Below is the HTML code
<select id="pageid:theform:Block:NewHireRequisitionId:BusinessSegment:selectedReqTypeId" name="pageid:theform:Block:NewHireRequisitionId:BusinessSegment:selectedReqTypeId" size="1" onchange="A4J.AJAX.Submit('pageid:theform',event,{'similarityGroupingId':'pageid:theform:Block:NewHireRequisitionId:BusinessSegment:j_id57','oncomplete':function(request,event,data){RefreshText();},'parameters':{'pageid:theform:Block:NewHireRequisitionId:BusinessSegment:j_id57':'pageid:theform:Block:NewHireRequisitionId:BusinessSegment:j_id57'} } )" style="width:200px">
<option value=""></option>
<option value="Clinical Informatics">Clinical Informatics</option>
<option value="Corporate Services">Corporate Services</option>
<option value="Early Development Services">Early Development Services</option>
<option value="Executive Office">Executive Office</option>
<option value="Late Phase Services">Late Phase Services</option>
<option value="Product Registration">Product Registration</option>
<option value="Strategic Solutions">Strategic Solutions</option>
<option value="Therapeutic Expertise">Therapeutic Expertise</option>
</select>
From what it looks like, it's built from other parts so you will likely need to use the entire ID to be sure that it's unique on the page. You could experiment with AGill's answer but I would just go with the entire ID.
WebElement element = driver.findElement(By.id("pageid:theform:Block:NewHireRequisitionId:BusinessSegment:selectedReqTypeId"));
After talking to the OP some more, turns out the element is in an IFRAME. An example of how to handle this is below.
driver.switch_to.frame(driver.find_element_by_tag_name("iframe"))
after done in the frame, make sure you switch back to the default content.
driver.switch_to.default_content()
There are other options for accessing IFRAMEs but this should get you started.
You can write a css selector for this. Look for the static portion of the id e.g. look for prefix or suffix or any substring which is unique and static and use that to write the css selector.
For example if id ends with text "selectedReqTypeId" you can write
By.cssSelector("[id$=selectedReqTypeId]")
Also you can write for matching pattern or substring like:
By.cssSelector("[id*='pattern']")
or as per your given code, you can probably write
By.cssSelector("[id*='NewHireRequisitionId']") //just an example
Similarly for startsWith, you can write:
By.cssSelector("[id^=startingText]")
If the element is in a frame you will need to use switchTo() to get into the frame to access the element. You should be able to find lots of reference material on SO for this and elsewhere. – JeffC 21 hours ago
I'm using Angular $resource and having a simple form with some inputs and a multiple select, for example:
<select ng-model="item.selectedItems" multiple>
<option value="bla">Bla</option>
<option value="bla2">Bla2</option>
</select>
Now when I selected all the items in the multiple select and do item.$save in my code on submit, the url called is
http://domain.com/api/items?field1=text&selectedItems=bla&selectedItems=bla2
However, I want this url to be
http://domain.com/api/items?field1=text&selectedItems[]=bla&selectedItems[]=bla2
just like I was having with a regular
<select name="selectedItems[]">
Does anyone know how to do this? Using ng-model="item.selectedItems[]" didn't work.
I'm using Slim Framework as backend and it just replaces the selectedItems parameter with the last in the url.
I need to use angular-chosen to customize a drop-down of groups for a project. I use resource to share the data between the controllers. I am able to extract the group list to
$scope.allgroups of my controller. The console.log shows me this image :
In my html, I do call the select in the following way but It always shows "No Group Found.." even with matching characters.
<select
chosen multiple style="width:150px;" id="newusergroups"
class="groupselect" title="Groups"
allow-single-deselect="true"
data-placeholder="Select Group.."
no-result-text="No Such Group.."
ng-model="selectedgroup"
ng-options="pergroup.name for pergroup in allgroups">
<option value=""></option>
</select>
Anywhere I am wrong? Please help.
If the screenshot shows the console.log of allgroups, then your ng-options should be ng-options="pergroup.name for pergroup in allgroups.result", OR allgroups = $myResource.result.
I want to add an html select with options AM,PM with angularjs,
what i need is having the key and the value of the option be the same :
<option value="AM">AM</option>
<option value="PM">PM</option>
My html looks like this
<select ng-model="ampm" ng-options="k as v for (k , v) in ampms"></select>
and my controller looks like
$scope.ampm = (new Date().getHours()) >= 12 ? 'PM' : 'AM';
$scope.ampms ={"AM":"AM","PM":"PM"};
and every thing working fine.
My question is why i cant have the same thing when i used an array (i tried all the options in the ng-options)
as this
$scope.ampms =["AM","PM"];
what ever i do i always get this
<option value="0">AM</option>
<option value="1">PM</option>
What i want is using an array like above with the option has the key and the value the same.
With AngularJS, you don't need to worry about what the value of the option is. All the selects I've seen with ng-options have values of 0 through whatever. If you're just looking for a dropdown with the two options, it can be as simple as
<select ng-model="ampm" ng-options="currOption for currOption in ['AM', 'PM']"></select>
See http://jsfiddle.net/EyBVN/1/
This is is a default behavior of ng-options in Angular. If you do not specify a key name, angular will automatically choose to use the index rather than a key. The code that does that can be seen on line 405 in /src/ng/directives/select.js on Angular's Github repository.
It can't even be forced by "value as value for (index, value) in values".
But as dnc253 just beat me to the punch with his answer (it showed up while I was typing)... you don't have to worry about it, Angular does it all for you automatically.
I did find a way to place specific data in the value of the options for a select. You have to add an ng-repeat attribute to the option tag inside the select tag:
<select id="{{question.id}}" name="{{question.id}}"
class="{{question.inputclass}}" ng-required="question.required"
title="{{question.title}}">
<option value=""></option>
<optgroup ng-repeat="group in question.data" label="{{group.group}}">
<option ng-repeat="item in group.data" value="{{item.value}}"
ng-selected="{{item.value == question.defaultValue}}">
{{item.description}}
</option>
</optgroup>
</select>
As a bonus, I left the option group tags in place to serve as an example for everyone.
The question.data JSON is:
[
{"group":"Canada","data":[{"value":"Ontario","description":"Toronto"},
{"value":"Quebec","description":"Quebec City"},
{"value":"Manitoba","description":"Winnipeg"}
]
},
{"group":"Mexico","data":[{"value":"Jalisco","description":"Guadalajara"},
{"value":"Nayarit","description":"Tepic"}
]
},
{"group":"United States of America","data":[
{"value":"Alabama","description":"Montgomery"},
{"value":"Georgia","description":"Atlanta"},
{"value":"Mississippi","description":"Jackson"},
{"value":"Louisiana","description":"Baton Rouge"},
{"value":"Texas","description":"Ausint"}
]
}
]