AngularJS - Checkboxen und Dropdown-Liste

Question

Wie ich im Thema erwähnt habe, versuche ich, hängt Checkboxen von Dropdown-Liste. Ich fülle Daten an meine Dropdownlist von Controller:

@RequestMapping(value = "/all", method = GET) 
public List<Warehouse> findAll(){ 
return warehouseService.findAll(); 
} 

$http 
    .get('/api/warehouses/all') 
    .then(function (response) { 
     $scope.warehouses = response.data; 
    }); 

Jedes Lager Objekt hat eine Liste mit Paket:

@OneToMany 
private List<Package> packages = new ArrayList<>(); 

Jetzt, als ich Strecke bin die Schaffung und wenn ich ein Lagerhaus von Dropdownlist wählen will i Kontrollkästchen füllen aus der Liste des aktuell ausgewählten Warehouse.

Wählen Sie Warehouse:

<select ng-model="credentials.warehouseStart"> 
    <option ng-selected="credentials.warehouseStart == x" id="startId" ng-value="x" ng-repeat="x in warehouse" >{{x.name}}</option> 
</select> 

und Kontrollkästchen:

<div flex-xs flex="50"> 
    <md-checkbox aria-label="Select All" 
       ng-checked="isChecked()" 
       md-indeterminate="isIndeterminate()" 
       ng-click="toggleAll()"> 
     <span ng-if="isChecked()">Un-</span>Select All 
    </md-checkbox> 
</div> 
<div class="demo-select-all-checkboxes" ng-model="credentials.packages" flex="100" ng-repeat="item in packages"> 
    <md-checkbox ng-checked="exists(item, selected)" ng-click="toggle(item, selected)"> 
     {{ item.name }} <p> </p> 
     {{ item.user.firstName }} {{ item.user.lastName }} 
    </md-checkbox> 
</div> 

Kästchen zum Ankreuzen Füllung:

$http 
    .get('/api/package/all') 
    .then(function (response) { 
     $scope.packages = response.data; 
    }); 

Es ist möglich, wenn ich ein Objekt in Dropdowlist (Warehouse) wählen kann ich bekommen eine Objekt-ID? Dann denke ich, kann ich eine korrekte Chebkoxen durch Direktive/Paket/alle/{ID} bekommen?

Answer 1

Ich basiere meine Antwort auf Ihren Kommentar, dass jedes Lager eine Liste von Paketen hat. Nichtsdestotrotz erwarte ich, dass Pakete Teil Ihres GET-Aufrufs an /api/lainers/all sind.

Zuerst möchte ich Ihre Lager Auswahl ngOptions verwenden ändern:

<select ng-model="selected.warehouse" 
      ng-options="x.name for x in warehouses"></select> 

Dann Pakete aufzulisten:

<div ng-model="selected.packages" 
    ng-repeat="item in selected.warehouse.packages"> 

    <input type="checkbox" 
     ng-checked="exists(item, selected)" 
     ng-click="toggle(item, selected)"> {{ item.name }} 
    <p> </p> 
    {{ item.firstName }} {{ item.user.lastName }} 
</div> 

ich geschaffen habe, um eine Probe here. Innerhalb, ich habe ein paar Wrapper um die Paketliste in Ihrem UI mit ngIf hinzugefügt, aber das ist nicht notwendig, aber dachte, dass Sie wahrscheinlich einen Ansichtsbereich zeigen würde, basierend darauf, ob eine Auswahl getroffen wurde oder nicht.