How to trigger an expression on selecting an option in Angular - javascript

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
};

Related

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>

Trigger event on selection of second box, Angular

I have 2 boxes the first you select parent, second you select the child of a selected parent.
How do I run the function bellow after the second selection ?
angular function
$scope.myFunc = function() {
var jsonItem = JSON.parse($scope.formData.formatType.id);
sessionStorage.setItem('format', jsonItem);
}
HTML
<select ng-model="formData.ProductType.name" ng-change="productTypeChange()" ng-options="product.name as product.name for product in productsandformats">
<option value="">- Please Choose -</option>
</select>
<select ng-model="formData.formatType" ng-options="format.Fname for format in formats.format" ng-if="formData.ProductType.name">
<option value="">- Please Choose -</option>
</select>
Use ng-change
<select ng-model="formData.formatType"
ng-options="format.Fname for format in formats.format"
ng-if="formData.ProductType.name" ng-change="myFunc()">
<option value="">- Please Choose -</option>
</select>`

Angularjs dropdown select value

I have this dropdown
<select class="form-control" ng-model="LoanDetailsVM.PaymentPeriodMonths">
<option value="1">Monthly</option>
<option value="3">Quarterly</option>
</select>
The LoanDetailsVM.PaymentPeriodMonths can be either 1 or 3, but the proper option is not selected when I'm opening the page.
Is there anything else I need to add in order for the correct option to be selected?
You should use [(ngModel)] instead of ng-model and [ngValue] instead of value:
<select class="form-control" [(ngModel)]="LoanDetailsVM.PaymentPeriodMonths">
<option [ngValue]="1">Monthly</option>
<option [ngValue]="3">Quarterly</option>
</select>

using 'required' for 'select' tag

How can I use required with the below code of select. I had values for all options. As for required to work, default selected option should have empty value. How can I get the required working without removing value of any option? Is there some tweak ?
<select required>
<option value = "-1" selected> </option>
<option value = "1"> one </option>
<option value = "2"> two </option>
</select>
In most modern browsers, a form containing an element with required will not submit until it has a value.
To make select work like that use an empty string as the value for the default item:
<select required>
<option value = "" selected> </option>
<option value = "1"> one </option>
<option value = "2"> two </option>
</select>
Live example: https://jsfiddle.net/zu80u9my/ (Form will not submit if a value has not been selected)

AngularJS: How to bind values of options (in select tag) generated with ng-repeat

I have the following html:
<select id="vehicleMark" name="vehicleMark" ng-disabled="!checked2" ng-model="mark.vehicleMark">
<option value=""><c:out value=""/></option>
<c:forEach items="${markeVozila}" var="marka">
<option value="${marka}"><c:out value="${marka}"/></option>
</c:forEach>
</select>
<select id="vehicleModel" name="vehicleModel" data-ng-show="mark.vehicleMark != ''" ng-model="vehicleModel">
<option ng-repeat='model in carModels | filter: mark' value="{{model.modelId}}">
{{model.vehicleModel}}
</option>
</select>
Now, the problem is in the second select that I can't set the value of the options. How can I set the values of the options to the values of my modelId attributes of the model object?

Categories