AngularJS - checkboxes and dropdownlist

Question

As I mentioned in topic i try do depends checkboxes from dropdownlist. I fill data to my dropdownlist from 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;
    });

Every Warehouse object have a List with package:

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

Now when i am creating Route and when i select one Warehouse from dropdownlist i wanna fill checkboxes from List from currently selected Warehouse.

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

And checkboxes:

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

Checkbox fill:

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

It is possible if i select one object in Dropdowlist(Warehouse) can i get a object id? Then i think i can get a correct chebkoxes by directive /package/all/{id} ?

Did my suggestion help?

Brian
– Brian

2017-12-11 22:10:40 +00:00
Commented Dec 11, 2017 at 22:10 — Brian
– Brian, Commented Dec 11, 2017 at 22:10

Brian · Accepted Answer · 2017-12-02 13:47:43Z

1

I am basing my answer of your comment that every warehouse has a list of packages. That said, I am expecting packages to be a part of your GET call to /api/warehouses/all.

First, I would change your warehouse selection to use ngOptions:

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

Then, to list the packages:

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

I have created a sample here. Within, I have added a couple of wrappers around the package list in your ui using ngIf, but that's not necessary, but figured you'd probably have a view area to show based on whether or not a selection was made.

answered Dec 2, 2017 at 13:47

Brian

5,0693 gold badges22 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Błażej Rejnowski Over a year ago

i have a question? how now can i take to array selected checkboxes?

Collectives™ on Stack Overflow

AngularJS - checkboxes and dropdownlist

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related