angulaire 2/personne à mobilité réduite a permis de sélectionner des options

Question

J'utilise Angular2 et j'ai 2 Selects:

<div ng-controller="ExampleController"> 
<form name="myForm"> 
<label for="companySelect"> Company: </label> 
<select name="companySelect" id="companySelect"> 
    <option *ngFor="let company of companies" 
      value="{{company.id}}"> {{company.name}} 
    </option> 
</select> 

<label for="documentTypeSelect"> Type: </label> 
<select name="documentTypeSelect" id="documentTypeSelect"> 
    <option value="type1">type1</option> 
    <option value="type2">type2</option> 
    <option value="type3">type3</option> 
</select> 
</form> 
<hr> 
</div> 

Je souhaite modifier deuxième sélectionnez les options en fonction de la première sélection. Je peux obtenir les types (valeur booléenne) en utilisant

company.companyRelations.pop(). Type1

company.companyRelations.pop(). Type2

Et maintenant, si par exemple type1 est false, l'option de second select doit être désactivée et si type2 est true, l'option doit être activée. Est-ce possible?

EDIT:

entreprises dans select ont deasdv, propriétés INVOIC et commandes qui sont vraies ou fausses. Comment puis-je passer ces propriétés dans les propriétés component.ts? Est-ce possible par événement ou quoi? Je veux par exemple

company.companyRelations.pop(). DESADV

Pour la société qui est sélectionné et il va changer les options handicapés dans le second.

html

<form name="myForm"> 
<label for="companySelect"> Company: </label> 
<select class="form-control" name="companySelect" id="companySelect" 
[(ngModel)]="companySelect" (ngModelChange)="onChange($event)"> 
    <option [ngValue]="undefined" disabled selected>Select...</option> 
    <option *ngFor="let company of companies" [ngValue]="company.id"> 
{{company.name}}</option> 
</select> 

<select name="documentTypeSelect" id="documentTypeSelect"> 
    <option [ngValue]="undefined" disabled selected>Select...</option> 
    <option [disabled]="!desadv" value="desadv">desadv</option> 
    <option [disabled]="!invoic" value="invoic">invoic</option> 
    <option [disabled]="!orders" value="orders">orders</option> 
</select> 
</form> 

component.ts

desadv: boolean = false; 
    invoic: boolean = false; 
    orders: boolean = false; 

et ici, il sera quelque chose comme:

onChange(event) { 
    if(event.desadv) { 
    this.desadv = true; 
    } 
    } 

Ma solution:

html

<form name="myForm"> 
<label for="companySelect"> Company: </label> 
<select name="companySelect" id="companySelect" [(ngModel)]="companySelect" 
(ngModelChange)="onChange($event)"> 
    <option [ngValue]="undefined" disabled selected>Select...</option> 
    <option *ngFor="let company of companies" [ngValue]="company"> 
{{company.name}}</option> 
</select> 

<label for="documentTypeSelect"> Type: </label> 
<select name="documentTypeSelect" id="documentTypeSelect"> 
    <option [ngValue]="undefined" disabled selected>Select...</option> 
    <option [disabled]="!desadv" value="desadv">desadv</option> 
    <option [disabled]="!invoic" value="invoic">invoic</option> 
    <option [disabled]="!orders" value="orders">orders</option> 
    <option [disabled]="!recadv" value="orders">recadv</option> 
    <option [disabled]="!shipment" value="orders">shipment</option> 
</select> 

component.ts

onChange(event) { 
this.desadv = event.companyRelations[0].desadv; 
this.invoic = event.companyRelations[0].invoic; 
this.orders = event.companyRelations[0].orders; 
this.recadv = event.companyRelations[0].recadv; 
this.shipment = event.companyRelations[0].shipment; 
} 

Answer 1

Essayez ceci:

<select class="form-control" name="companySelect" id="companySelect" [(ngModel)]="companySelect" (ngModelChange)="onChange($event)"> 
    <option [ngValue]="undefined" disabled selected>Select...</option> 
    <option *ngFor="let company of companies" [ngValue]="company.id">{{company.name}}</option> 
</select> 

<select [disabled]="btnDisable" name="documentTypeSelect" id="documentTypeSelect"> 
    <option value="type1">type1</option> 
    <option value="type2">type2</option> 
    <option value="type3">type3</option> 
</select> 

component.ts

private companySelect: any; 
private btnDisable: boolean = true; 

onChange(event) { 
    if(event) { 
     this.btnDisable = false; 
    } 
} 

Answer 2

Oui, il est possible. J'ai créé une démo dans laquelle la deuxième liste déroulante sera activée en fonction de la valeur de l'indicateur dans le premier objet déroulant.

// Code goes here 
 

 
var myApp = angular.module('plunker',[]); 
 
angular.module('plunker').controller('MyCtrl', MyCtrl) 
 
MyCtrl.$inject = ['$scope']; 
 
function MyCtrl($scope) { 
 
$scope.items1 = [{ 
 
id: 1, 
 
label: 'aLabel', 
 
'flag':true, 
 
subItem: { name: 'aSubItem' } 
 
}, { 
 
id: 2, 
 
label: 'bLabel', 
 
'flag':false, 
 
subItem: { name: 'bSubItem' } 
 
}]; 
 

 
$scope.items2 = [{ 
 
id: 1, 
 
label: 'MyName', 
 
'flag':true, 
 
subItem: { name: 'aSubItem' } 
 
}, { 
 
id: 2, 
 
label: 'YourName', 
 
'flag':false, 
 
subItem: { name: 'bSubItem' } 
 
}]; 
 

 
$scope.changeDetect = function(){ 
 
    $scope.selected1=''; 
 
    console.log($scope.selected); 
 
    if($scope.selected.flag) 
 
    { 
 
    $scope.flagValue=false; 
 
    } else { 
 
    $scope.flagValue=true; 
 
    } 
 

 
} 
 

 
$scope.flagValue=true; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script> 
 

 
<div ng-app="plunker" ng-controller="MyCtrl"> 
 
    <select ng-options="item as item.label for item in items1 track by item.id" ng-model="selected" ng-change="changeDetect()"></select> 
 
    
 
    <select ng-options="item as item.label for item in items2 track by item.id" ng-model="selected1" ng-disabled="flagValue"></select> 
 
    </div>

Dans AngularJS 2

<select [ngModel]="selectedDeviceObj" (ngModelChange)="onChangeObj($event)" name="sel3"> 
    <option [ngValue]="i" *ngFor="let i of deviceObjects">{{i.name}}</option> 
    </select> 
<select [ngModel]="selectedDeviceObj1" name="sel2" [disabled]="flag"> 
    <option [ngValue]="i" *ngFor="let i of deviceObjects1">{{i.name}}</option> 
    </select> 
onChangeObj(newObj) { 
    this.selectedDeviceObj1=''; 
    console.log(newObj); 
    this.selectedDeviceObj = newObj; 
    if(newObj.flag){ 
     this.flag = false; 
    } 
    else { 

     this.flag = true; 
    } 

S'il vous plaît trouver Démo Lien Plunkr