We Keep Coding

How to add default option in select for AngularJS?

I don't know why this is not adding a default selected view:
I thought ng-init would make it have a default selected view.
How do I make the drop down box menu have a default selected value?
<select ng-init="selectedCar = Cars[0]" ng-model="selectedCar" class="form-control" ng-required="true">
<option value="" selected>Select a job title</option>
<option ng-repeat="car in Cars" ng-value="car.firstname car.lastname">
{{car.firstname}} {{car.lastname}}
</option>
</select>

You can try to initialize selectedCar in your controller rather ng-init.
Try the below code.
In your controller initialize it.
For e.g:
$scope.selectedCar = $scope.Cars[0];
And in the template:
<select ng-model="selectedCar" class="form-control" ng-required="true">
<option value="" selected>Select a job title</option>
<option ng-repeat="car in Cars" ng-value="car.firstname car.lastname" ng-selected="selectedCar.id == car.id">
{{car.firstname}} {{car.lastname}}
</option>
</select>
Or
You can try using ng-options. Reference Another way by using ng-options

You can set the default value for the select element by binding the ng-model with the variable you assigned with ng-init since ng-init doesn't assign the default value for the select and option components, but the default value to a variable in the scope.
Try using selected in option to select the default value.
<select ng-init="selectedCar = Cars[0]" ng-model="selectedCar" class="form-control" ng-required="true">
<option value="" selected>Select a job title</option>
<option ng-repeat="car in Cars" ng-value="car.firstname car.lastname" selected>
{{car.firstname}} {{car.lastname}}
</option>
Or you can use ng-selected
<select ng-init="selectedCar = Cars[0]" ng-model="selectedCar" class="form-control" ng-required="true">
<option value="" selected>Select a job title</option>
<option ng-repeat="car in Cars" ng-value="car.firstname car.lastname" ng-selected="$first">
{{car.firstname}} {{car.lastname}}
</option>

How to get aria-labelledby value

My question is how can I get the value from aria-labelledby value?
I have two method let user input, one is text another is drop-down list，
but I can't find how to select value from same label.
Here is my code
<label id="lblconnect">Connect:</label>
<input id="connect text" name="connect text" aria-label="lblconnect">
<select id="connect" name="connect" aria-label="lblconnect">
<option hidden selected>Choose Connect Type</option>
<option value="wired">Wired</option>
<option value="wifi">WIFI</option>
<option value="bt">BT</option>
<option value="ble">BLE</option>
<option value="ble5">BLE5</option>
<option value="lora">LoRa</option>
<option value="nb-iot">NB-IoT</option>
<option value="zigbee">ZIgBee</option>
</select><br/><br/>

I am assuming you want to get the value of the Select Field. If so, you can get it by using its Id
const x = document.getElementById("connect");
console.log(x.value);

Select dropdown option by text if same list of class are found in protractor js

I'm working in Protractor and javasript. My page has 3 dropdowns of same class "imageeditor". I want to select the 2nd dropdown and click the option say "Package" by passing the text as parameter.I want the different xpath and css to perform the select option.
<div class="imageeditor">
<select class="form-control m-b-sm">
<option>Select Image Style</option>
<option value="image-panel">Panel</option>
<option value="image-package-panel">Package</option>
<option value="image-open-panel">Open</option>
</select>
</div>
<div class="imageeditor">
<select class="form-control m-b-sm">
<option>Select Image Style</option>
<option value="image-panel">Panel</option>
<option value="image-package-panel">Package</option>
<option value="image-open-panel">Open</option>
</select>
</div>
<div class="imageeditor">
<select class="form-control m-b-sm">
<option>Select Image Style</option>
<option value="image-panel">Panel</option>
<option value="image-package-panel">Package</option>
<option value="image-open-panel">Open</option>
</select>
</div>

You can get the desired select element by index:
var desiredImageEditor = $$(".imageeditor select").get(1);
Now, in order to select an option, you have multiple ways to do so. One is to select the inner option by the class name and click it:
var desiredOption = desiredImageEditor.$("option.image-package-panel");
desiredImageEditor.click(); // open up dropdown
desiredOption.click();
Or, it should also be possible to just send keys to the select element:
desiredImageEditor.sendKeys("Package");
There is also this convenient abstraction over select and option.

How to trigger an expression on selecting an option in Angular

I have the following code wrapped in ng-repeat
<select class="selectpicker input input-halfwide">
<option disabled selected> -- Select your destination -- </option>
<option ng-repeat="(key, country) in home.List" value="key" ng-model="home.status.selectedOption">{{country.title}}
</option>
</select>
I want that when the user selects an option, to perform the expression home.doSomething() in the controller.
How can this be achieved?

You can do this with an ng-change on the select:
<select class="selectpicker input input-halfwide"
ng-model="home.status.selectedOption"
ng-change="home.doSomething()">
<option disabled selected> -- Select your destination -- </option>
<option ng-repeat="(key, country) in home.List" value="{{ key }}"
ng-selected="{{ key == home.status.selectedOption }}">
{{country.title}}
</option>
</select>
Also note that I moved the ng-model directive to the select instead of the option element.
A better practice would be to use the ng-options directive:
<select class="selectpicker input input-halfwide"
ng-model="home.status.selectedOption"
ng-change="home.doSomething()"
ng-options="country.id as country.name for country in home.List">
<option disabled selected> -- Select your destination -- </option>
</select>

you need to use ng-change to detect selection change and ng-model for the selected value on select.
<select class="selectpicker input input-halfwide" ng-change="home.doSomething()" ng-model="home.status.selectedOption">
<option disabled selected> -- Select your destination -- </option>
<option ng-repeat="(key, country) in home.List" value="key">{{country.title}}</option>
</select>
now, in your controller you can directly use the selected value using $scope
$scope.home.doSomething = function () {
// $scope.home.status.selectedOption
};

How to add selected attribute to ng-repeated dropdown form?

I have a form that builds out multiple widgets based on some JSON data. In part of that form is a select dropdown, and some items have different options selected by default.
ie:
object 1 {
tag: "products"
}
The select dropdown in the ng-repeat widget
<select class="btn-success form-control">
<option value="companies">companies</option>
<option value="news">news</option>
<option value="people">people</option>
<option value="products">products</option>
</select>
^ Here if this was object 1, I'd need the products option to gain the selected attribute.
What I've tried so far, that hasn't worked, but so you can see my thinking:
HTML
ng-repeat="stuff in stuffs"...
<select class="btn-success form-control">
<option value="companies">companies</option>
<option ng-if="widget.selectedTag(stuff.tag)" value="news">news</option>
<option value="people">people</option>
<option value="products">products</option>
</select>
Controller
this.selectedTag= function(s) {
console.log(s);
if (s = 'news'){
return 'selected';
}
}
How would you go about this?

Found answer here: Initializing select with AngularJS and ng-repeat
<option ng-selected="{{operator.value == filterCondition.operator}}"
ng-repeat="operator in operators"
value="{{operator.value}}">
So in my case:
<option value="products"
ng-selected="{{stuff.tag == 'products'}}">products</option>