javascript - AngularJS - 复选框和下拉列表

Question

正如我在主题中提到的，我尝试依赖下拉列表中的复选框。我从 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;
    });

每个仓库对象都有一个包含包的列表:

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

现在，当我创建路线并从下拉列表中选择一个仓库时，我想填充当前所选仓库列表中的复选框。

选择仓库:

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

和复选框:

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

复选框填充:

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

如果我在 Dropdowlist(Warehouse) 中选择一个对象，我可以获得对象 ID 吗？然后我想我可以通过指令/package/all/{id} 获得正确的 chebkoxes ？

Answer 1

我的回答是基于您的评论，即每个仓库都有一份包裹 list 。也就是说，我希望包成为您对 /api/warehouses/all 的 GET 调用的一部分。

首先，我会将您的仓库选择更改为使用 ngOptions :

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

然后，列出软件包:

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

我创建了一个示例 here 。在其中，我使用 ngIf 在您的 ui 中的包列表周围添加了几个包装器，但这不是必需的，但我认为您可能会根据是否做出选择来显示一个 View 区域。