Hi this JSFiddle works in Internet Explorer and Firefox but no other browxsers work. The idea of the code is a currency converter that is up to date using the Yahoo Currency API. It doesn't update the $scope on the other browsers the way it is supposed to on Chrome. http://jsfiddle.net/xHmLT/13/
choose a post ({{visible.post}} is visible)
<select>
<option ng-repeat="shot in shots" ng-click="visible.post = shot.Name" value="{{shot.Name}}">{{shot.Name}}</option>
</select>
<div ng-repeat="shot in shots" ng-if="visible.post == shot.Name">{{shot.Rate | currency:'':''}}
</div>
<div ng-repeat="shot in shots" ng-if="visible.post == shot.Name">{{shot.Rate *5 | currency:'':''}}
</div>
I updated your fiddle and is working as you'd intended...
Your select is now populated via ng-options and the model is visible.post (as an object). As a result anywhere showing visible.post, is now showing visible.post.Name (field on the object)
<select ng-options="s.Name for s in shots" ng-model="visible.post"></select>
The initialization of the selected value is done in the success promise handler:
$scope.visible.post = $scope.shots[0];
Related
There is one requirement for my application to select multiple items from a listbox in microsoft edge browser
I am using watir webdriver to test my application
The DOM structure is as follows:
<div id="textSearch">
<div id="textSearch">
<select name="#Type" id="textType" onchange="unselectOptionZero('#Type');" size="7" multiple="" width="250">
<option value="*" selected="">- All -</option>
<option value="text1">text1</option>
<option value="text2">text2</option>
<option value="text3">text3</option>
<option value="text4">text4</option>
<option value="text5">text5</option>
</select>
</div>
</div>
I tried these following command to select multiple values
#browser.select_list(:id, "textType").option(:value => "text3").select
#browser.send_keys :control
#browser.select_list(:id, "textType").option(:value => "text4").select
which does not seem to working. I tried using iteration via .select but it does not seem to be working.
I also tried selenium support Selenium::WebDriver::Support::Select.new but it does not help. Is there any other way to select multiple options in microsoft edge browser using execute_script using javascript.
Watir's Select#select selects the options by calling the #click method. Unlike other drivers, Edge treats this like a regular click, which unselects the previous options. This is a known/expected behaviour by the Microsoft Edge Team.
Their suggestion is to use the Actions object to press and hold the control button. However, attempting to do this, ex by calling option.click(:control), will result in an unknown command exception. The Edge driver has not yet implemented the Actions command.
Until then, you will need to execute JavaScript to select the options.
If you are using Watir v6.8 or later, you can use the new #select! method to select the option via JavaScript instead of mouse clicks. This will retain the previously selected values.
s= #browser.select_list(:id, "textType")
s.select!("text3")
s.select!("text4")
Note that #select now supports looking for options by both text and value (as opposed to prior versions where it only checked text).
If you are using earlier versions of Watir, the same can be done using #execute_script:
s= #browser.select_list(:id, "textType")
select_script = 'arguments[0].selected=true;'
#browser.execute_script(select_script, s.option(:value => "text3"))
#browser.execute_script(select_script, s.option(:value => "text4"))
I want to dynamically change select item of a dropdown list control using Angular JS, but it does not change the view.
I tried this one but no result yet!
Controller:
$scope.dischargeType = {id:0,title:''};
$scope.setSelect = function() {
debugger;
$scope.dischargeType = $scope.dischargeTypes[1];
alert($scope.dischargeType.title);
// it shows that the $scope.operationType get the value,but no changes on html
}
View:
<label class="col-sm-3 control-label">Discharge Type</label>
<div class="col-sm-9">
<select ui-select2 data-ng-model="dischargeType" id="add-dischargeType" name="dischargeType">
<option data-ng-repeat="item in dischargeTypes" value="{{item.id}}">{{item.title}}</option>
</select>
</div>
Thank you indeed.
From the code you posted... It doesn't look like you're actually calling the setSelect function in your code.
So basically you have a function made to do something, but if you never call it, it won't actually execute. Also, you may want to mention whether or not you're getting errors in the console window of chrome when you're viewing the page.
So i'm using angular and this is my select html:
<select id="date" ng-model="selectedDay" ng-change="setDate()" >
<option>another option</option>
<option>an option</option>
</select>
this is in my controller:
$scope.selectedDay;
document.getElementById("date").selectedIndex = "0";
The result: Three options: one blank (which is default selected) and then the two options I made in html
What the hell? why isn't the default when i open the view "another option"
Firstly, always check the official documentation. AngularJs is well documented.
Secondly, do not use document.getElementById ("date") selectedIndex = "0" - that's javascript. Avoid using pure Javascript when an Angular function is available.
Documentation:
https://docs.angularjs.org/api/ng/directive/select
https://docs.angularjs.org/api/ng/directive/ngSelected
My task is very simple. I'm able to set values to text boxes that come from restful api.. I'm able to get and display on the raw HTML page using {{currentCommodity.commodityName}} But, not able to set values to the select tag even though I'm able to get value.
My code is
$scope.editCommodity = function(commodityIndex) {
console.log("commodities object",$scope.commoditiesAdded[commodityIndex].commodityName);
$scope.currentCommodity.commodityName = $scope.commoditiesAdded[commodityIndex].commodityName;
}
It returns a commodity name with paddy..
My HTML code
---{{currentCommodity.commodityName}}-
<select class="form-control selection_size" ng-change="selectunits(currentCommodity.commodityName.commodityID)" ng-model="currentCommodity.commodityName" ng-disabled="{{editBusinessFlag}}" ng-options="commodityitem.commodityName for commodityitem in commodityList">
</select>
Any help would be greatly appreciated.
Try following code:
You selected : {{currentCommodity.commodityName}}
<select class="form-control selection_size" ng-model="currentCommodity" ng-options="commodityitem.commodityName for commodityitem in commodityList">
</select>
I have the following setup
"<form name=\"mylimit\" style=\"float:left\">
<select name=\"limiter\" onChange=\"limit()\">
<option selected=\"selected\"> </option>"; ...
I wrote a js script to access the selected value of the selectField 'limiter' like so:
var w = document.mylimit.limiter.selectedIndex;
var url_add = document.mylimit.limiter.options[w].value;
//On every browser i get the expected value except on Internet Explorer. think IExplorer dont like the bolded portion above. Any clue?
IE is looking for the value attribute. It looks like other browsers are defaulting to the text displayed as the value if value="" is not found on the option tag. The following is what works on all major browsers.
<form name="mylimit" style="float:left">
<select name="limiter" onChange="limit()">
<option selected="selected" value='foo'>bar</option>
</select>
</form>
<script>
var index = document.mylimit.limiter.selectedIndex;
var value = document.mylimit.limiter.options[index].value;
alert(value); // Alerts 'foo'
</script>
This way you can have a seperate value and display for each option.
Did you try out one of these
document.mylimit.limiter.options[document.mylimit.limiter.selectedIndex].value
or
document.getElementById('limiter').options[document.getElementById('limiter').selectedIndex].value
This should help I think
document.getElementById("limiter").value works as well.