Question

我使用Angular2，我有两个选择：

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

我想根据第一个选择更改第二个选择选项。我可以使用

获取类型（布尔值）

company.companyRelations.pop（）。TYPE1

company.companyRelations.pop（）。TYPE2

现在，如果例如type1为false，则应禁用第二个选择中的选项，如果type2为true，则应启用选项。这可能吗？

编辑：

选择的公司有deasdv，invoic和order属性，无论是真是假。我现在如何将这些属性传递给component.ts属性？有可能通过活动或什么？我想得到例如

company.companyRelations.pop（）。DESADV

对于已选择的公司，它将在第二个公司中更改已禁用的选项。

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;

在这里它将是：

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

我的解决方案：

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

试试这个：

<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

是的，这是可能的。我创建了一个演示，其中第二个下拉菜单将根据第一个下拉对象中的flag值启用。

＆＃13;

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

＆＃13;

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

＆＃13;

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

请参阅演示链接Plunkr

Angular 2更改已禁用/已启用选择选项

2 个答案: