Develop Reference

Update value in select depending from other field in Angular 8

I'm trying to update the value in select in Angular 8.
I found that I can use:
$('#selectSeccion').val("SeccionOption");
This select is the next one:
<select name="seccion" class="form-control" id = "selectSeccion">
<option *ngFor="let seccion of seccion" [ngValue]="seccion">{{seccion.seccion}}</option>
</select>
jQuery code is not working when I use the select with Angular, only works when select is normal html like the next one:
<select class="form-control" id = "prueba">
<option value = ""></option>
<option value = "other">other</option>
</select>
How can I update the value on the "ng" select?

I would not recommend using jQuery along with Angular.
you can read more about it here: http://www.learnangularjs.net/using-jquery-with-angular.php
The simplest way
component.html:
<select [(ngModel)]="selectModel" (change)="selectionChange()">
<option [value]="seccion" *ngFor="let seccion of seccions"> {{seccion}}</option>
</select>
component.ts:
selectionChange() {
console.log(this.selectModel)
}
changing the selectModel parameter will trigger the select to change as well.

Based on previous recommendation I can updated using Angular, which always was the best way by the way. No jQuery. I have to change my select to the next one
<select name="seccion" class="form-control" id = "selectSeccion" [(ngModel)]="value" #ctrl="ngModel">
<option *ngFor="let seccion of seccion" >{{seccion.seccion}}</option>
</select>
Adding this on select tag > [(ngModel)]="value" #ctrl="ngModel" and updating the ts file with this lines:
value : string = '';
updatingFunction(){ this.value = "SeccionUpdated"; }
I left it if there someone needs it

content select option based on previous select option angularjs

i want to create 2 select option which the content of the other one selected option based to previous option. here is my html
<div class="col-sm-2">
<select class="form-control" ng-model="y">
<option value="1">a</option>
<option value="2">b</option>
</select>
</div>
<div class="col-sm-2">
<select class="form-control" ng-model="z">
<option ng-repeat = "x in list" value="{{x.idproduct}}">{{x.descproduct}}</option>
</select>
</div>
but there is error, the other select option wont showing the option like in this picture
here is my js file
if ($scope.y === 1) {
$scope.list = [
{idproduct:"13", descproduct:"cc"},
{idproduct:"14", descproduct:"dd"}
];
}
if ($scope.y === 2) {
$scope.list = [
{idproduct:"15", descproduct:"ee"}
];
}

You need to bind the change event so that your list gets updated at the time that your value is updated. Plus your === can cause an issue. With === your string value is being compared to integers 1 and 2.
Here is a plunker: ng-change for change in dropdown
<select class="form-control" ng-model="y" ng-change="updateList()">
<option value="1">a</option>
<option value="2">b</option>
</select>
$scope.updateList()={
if ($scope.y == 1) {
$scope.list = [
{idproduct:"13", descproduct:"cc"},
{idproduct:"14", descproduct:"dd"}
];
}
if ($scope.y == 2) {
$scope.list = [
{idproduct:"15", descproduct:"ee"}
];
}
}

The value of your option is String value="2"
And you're comparing it to an Integer if ($scope.y === 2)
You should compare it like if ($scope.y === '2') or if (parseInt($scope.y) === 2)

Create a function and put your Js code in that function and call function on ng-change of the first dropdown. Here you if condition executes once during app initialization. So by triggering ng-change we can call function and update the lists based on the selection.

Angular model change isn't reflected to html select box

I have an html list with a form for defining filter values. In this form there is a select box:
<div style="...">
<label for="lstCategory">Category:</label><br/>
<select name="category" id="lstCategory" ng-model="category" ng-change="loadActivities()">
<option value="0">default1</option>
<option value="1">default2</option>
<option ng-repeat="category in categories" value="{{ category.id }}">{{ category.id }}</option>
</select>
</div>
In my controller I bind the "categories" model to a REST resource:
.controller('AppointmentsHomeCtrl', [
...
function(
...
) {
$scope.location = typeof $location.search().location != 'undefined' ?
$location.search().location :
'0';
$scope.category = typeof $location.search().category != 'undefined' ?
$location.search().category :
'0';
$scope.categories = CategoriesResource.query();
Now I want to preselect a value in this select box, depending on the dearch parameter "location" in my url, which is done by the $scope.category = typeof $locati....... part of the code.
My problem is, that this preselection isn't reflected to my HTML while the mnodel itself has the correct value.
I already tryed to set the value after the query to the resource is done by watching the resource or giving a callback function to the "query" method but this also isn't working.
Did I missed something here? What is the correct way to solve this problem?
Edit:
It seems to recognise the options since:
$scope.category = "foo"; adds a pseudo option which gets selected.
But when I choose an existiong id, nothing happens at all:
$scope.category = "3";

at controller you can try this method for preselect value
$scope.precategory = '0'; //just for example value
then on your html code make sure ng-model having different variable with ng-repeat like this one
<select name="category" id="lstCategory" ng-model="precategory " ng-change="loadActivities()">
<option value="0">default1</option>
<option value="1">default2</option>
<option ng-repeat="category in categories" value="{{ category.id }}">{{ category.id }}</option>
that method will help solve your problem, because i was getting same problem before :)

Instead of $scope.categories = CategoriesResource.query(); try:
CategoriesResource.query().then(function(result) {
$scope.categories = result;
});
You may have to tweak it a bit if the result is not an array...

ng-selected not working

My problem is that ng-selected is set as true but the option is not getting selected
This is my controller code
.controller("PendingInvoiceCtrl", function($scope, $location, safeApply, dataService) {
var userData = dataService.data();
var mauth_token = userData.mauthToken;
var mauth_acntId = userData.thisApartment.account;
var apt_id = userData.thisApartment.id;
$scope.house_list = userData.thisApartment.house;
$scope.selectedHouseId = $location.search().houseId;
console.log($scope.selectedHouseId);
});
This is my HTML code
<select ng-model="selectedHouseId">
<option ng-repeat="house in house_list" ng-selected="{{ house.house_id == selectedHouseId }}" value="{{ house.house_id }}">
{{ house.house_display_name }}
</option>
</select>
And below is my data format
{
house:[0]:{
house_display_name: "paras, 101",
house_id: "520755"
}
}

The ng- attributes don't need the extra curly braces. Try:
<option ng-repeat="house in house_list" ng-selected="house.house_id == selectedHouseId" ng-value="house.house_id">
{{house.house_display_name}}
</option>
A better approach would be to use the ng-options possibility of the select tag. This would result in:
<select
ng-model="selectedHouseId"
ng-options="house.house_id as house.house_display_name for house in house_list">
</select>
And then you don't need to manually worry about the selected attribute for the options, as it will select the one depending on the value of the model.

Your option tag should be:
<option ng-repeat="house in house_list" ng-selected="house.house_id == selectedHouseId" ng-value="house.house_id">

if you use ng-Selected and ng-Model together was never really specified. It looks like at some point ng-Model took priority over ng-Selected.

I recommend you to use the Angular Directive ng-options.
<select ng-options="house.house_id as house.house_display_name for house in house_list" ng-model="selectedHouseId"></select>
Associated plunker: http://plnkr.co/8LGz5o0d2gDRoRHYr4pQ

hiding an option in ng-options

I'm pretty new to Angular and trying the ng-options. In my controller, I have:
$scope.permissionLevels = [
{ value: "ROLE_READ", text: "Read Only" },
{ value: "ROLE_WRITE", text: "Write" }
];
In my template, I have:
<select ng-options="permissionLevel.text for permissionLevel in permissionLevels"
ng-model="selectedValue"></select>
Depending on the view, I want to hide either Read or Write. So in my controller, I have another flag that indicates what view it is. Before I used ng-options, I had a normal select drop down and did something like this:
<select>
<option>Read Only </option>
<option ng-show="shouldShowWrite">Write </option>
</select>
Is there a way to do this with ng-options? Thanks.

You could use a filter in the ngOptions expression:
<select ng-model="selectedValue"
ng-options="permissionLevel.text for permissionLevel in
permissionLevels | filter:shouldShow">
</select>
and define the shouldShow() function to $scope in the controller:
$scope.shouldShow = function (permissionLevel) {
// put your authorization logic here
return $scope.permission.canWrite || permissionLevel.value !== 'ROLE_WRITE';
}
For the full example see: http://plnkr.co/edit/8FkVktDXKGg3MQQawZCH

Consider ngRepeat for that level of control. I don't think it's possible with ngOptions.
<select ng-model="selectedValue">
<option ng-repeat="permissionLevel in permissionLevels" value="{{permissionLevel.text}}" ng-show="shouldShowWrite(permissionLevel)">
{{permissionLevel.text}}
</option>
</select>

Plaese check below code, it may help you to solve the problem!!
<select>
<option>Read Only </option>
<option ng-show="selectedValue.value=='ROLE_WRITE'">Write </option>
</select>