AngularJS - 复选框和下拉列表

迈克·埃文斯

正如我在主题中提到的，我尝试依赖下拉列表中的复选框。我从控制器将数据填充到我的下拉列表中：

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

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

每个 Warehouse 对象都有一个包含包的列表：

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

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

选择仓库：

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

布赖恩

我根据你的评论回答，每个仓库都有一个包裹清单。也就是说，我希望包成为您对/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>

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。