I have a web application to write and in the majority of cases I have a 1 to 1 relationship between objects of Class A and objects of Class B, so I hop from one to the other. Sometimes it is 1 to many, in this case I need to display a popup menu and let the user take a selection from the menu and then I will navigate as if it was 1 to 1.
All this is brand new code so no legacy JavaScript/J Query exists.
I seldom write web code but from I have learnt recently Angular appears to be an architectural correct way to do things instead of writing my own JavaScript I want to use the correct Angular method.
But I need a start point. I was looking for a Angular directive and I can see things like input[email] and input[month] but I cannot see input[dropdown] or input[popup].
Can someone please steer me in the right direction? Thanks.
For dropdowns you want to use html-select. To dynamically add values to the dropdown use ng-options with the html select.
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
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.
We are attempting to resolve a maddening bug in IE 10 in which the option label of the selected option does not get rendered for an Angular <select>. Instead, the label of the option appears as {{option}}, implying that the directive could not be resolved. What is worse is that this problem does not happen in IE 11 or later, or Chrome. Here is the relevant code:
The HTML:
<select class="settings-select-box" name="LOCATION_UPDATE_FREQUENCY"
id="LOCATION_UPDATE_FREQUENCY"
data-ng-model="configurations.LOCATION_UPDATE_FREQUENCY">
<option data-ng-repeat="option in frequency" value="{{option}}">{{option}}</option>
</select>
In the controller JS code we define frequency as a static array, since the choices will never change:
$scope.frequency = ["Never","Daily","Weekly","Monthly"];
The scoped variable used for the model is configurations.LOCATION_UPDATE_FREQUENCY, and is defined using a value from the database. Persisting to the database works on IE 10 and other browsers, which means that binding from the UI to the server appears to be working without issue.
What is really strange about this bug is that the correct option still gets selected in IE 10, but the label is broken or not being rendered properly.
Here is a screen capture to further illustrate the problem:
According to offical documentation you should use "ng-value"
https://docs.angularjs.org/api/ng/directive/ngValue
<select class="settings-select-box" name="LOCATION_UPDATE_FREQUENCY"
id="LOCATION_UPDATE_FREQUENCY"
data-ng-model="configurations.LOCATION_UPDATE_FREQUENCY">
<option data-ng-repeat="option in frequency" ng-value="{{option}}">{{option}} </option>
</select>
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
The following is something that I'd like to accomplish with Angular but I'm not sure if it's even possible.
My form would be comprised of 3 views/templates each with it's own controller. Two views are fixed, the third view needs to by dynamically loaded based on a value selected from a dropdown in one of the fixed views. The view and controller name would be derived based on the selected value. If possible I'd like to dynamically load the javascript for the controller of the selected view as well.
I heard some rumblings about this possibly in Angular 2.0 but I'm not exactly sure how to approach it.
Any thoughts? I'm not stuck with Angular so if another framework would work better in this case please let me know.
Unless you are talking about ng-route and $routeProvider, you can have it with ng-include.
By setting ng-include as dynamic, your html will be downloaded and replace the section.
NOTE: however, ng-include does not allow to have script tag in it.
You need to go around using your own directive.
This is the example of using ng-include,
http://plnkr.co/edit/nlGVNfSpJOjIfIXxpEKc?p=preview
<body ng-app ng-init="dynamic='1.html'">
<select ng-model="dynamic">
<option value="1.html">dynamic 1</option>
<option value="2.html">dynamic 2</option>
<option value="3.html">dynamic 3</option>
</select>
dynamic: {{dynamic}}
<div>Fixed 1</div>
<div>Fixed 2</div>
<div ng-include="dynamic"></div>
</body>
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?