AngularJS - managing checkboxes and dropdownlists

When I talk about the topic of depending on checkboxes from a dropdown list, I mention that I populate my dropdown list with data from the 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;
    });

Each Warehouse object has a List of packages:

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

Now, when creating a Route and selecting a Warehouse from the dropdown list, I want to populate the checkboxes based on the List from the 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>

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

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

Is it possible to retrieve an object ID when selecting an object in the dropdown list (Warehouse)? Then I believe I can obtain the correct checkboxes using the directive /package/all/{id}.

Answer №1

Based on your statement that each warehouse has a list of packages, I assume you expect packages to be included in your GET request to /api/warehouses/all.

To start, I recommend updating your warehouse selection using ngOptions:

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

Next, to display 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 provided a sample here. In this example, I added some wrapping elements around the package list in your UI using ngIf, although this may not be necessary. It's possible you may want to display certain information based on whether a selection was made or not.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Testing a React component's function within the confines of a Redux Provider component

My current challenge involves unit-testing a React component called TodoList. This component essentially maps through items and displays them in the render method. These items, of type TodoItem, are retrieved from the Redux store using MapStateToProps. Be ...

"Enable real-time editing with inline save/submit feature in

I'm struggling to figure out how to extract the modified content from a CKEditor instance and send it to a URL. I've been referencing something like this: but I can't seem to determine how to save the changes. Is there a way to post the up ...

Is it acceptable to post variables using AJAX for processing?

Is there a way to send data with AJAX using the code provided? It seems like the information is not being sent to the PHP file as intended. Here is the code snippet: $('#send').click(function(){ var pseudo = $('#psd').val(); }) ...

Having trouble correctly parsing XML data using JavaScript

My input field contains the following XML code: <?xml version="1.0" encoding="utf-8"?> <players timestamp="1536505850"> <player id="0518" name="Eagles, Philadelphia" position="Def" team="PHI" /> <player id="10271" name="Jones, Jul ...

When refreshing, jsTree should automatically expand all nodes

I have been attempting to expand all the nodes in my JSTree after refreshing it, but so far I have been unsuccessful. $('#'+messages.Instance_Name).jstree(true).settings.core.data = interfaceNode; $('#'+messages.Instance_Name).jstree ...

Use AngularJS to synchronize items on the same row based on user input in the first column

<td align="center"><input type="number" name="test" ng-model="item.qty" ng-model-options="{ updateOn: 'blur' }" ng-change="Save(item.qty, item.qty2, item.include, {{$index}})" /></td> <td align="center"><input type="n ...

When using threejs, the color set for setClearColor is supposed to be white. However, when calling an external HTML file, it unexpectedly renders as

When I call an external HTML file in Three.js, the value for setClearColor is white but it renders as black. How can I solve this issue? Click here to view the image Here are the codes from the external file: <div id="3d-modal"></div> <sc ...

Tips for activating just a single event, whether it's 'change' or 'click'

I am facing an issue with a number input tag that has two event listeners 'on-click' and 'on-change'. Whenever I click on the arrow, both event listeners get triggered. I want only one event to trigger first without removing any of the ...

When viewing on mobile devices, the hover effect in responsive web design

While working on a responsive website, I encountered some challenges. I have a Div containing an image and some information. When a user hovers over this div, the background changes and 3 buttons appear. However, the issue arises when using a mobile devi ...

Organize unstructured JSON data using a specific method

My service returns a JSON with irregular data structure as shown below: dataFromService: [ { event_data: '2021-03-18T15:20:31.314Z', // if !null = page event_category: 'news', event_title_en: 'page title ...

The execution of Javascript should be limited to when the tab or browser window is in focus

Similar Question: Detect If Browser Tab Has Focus I have developed a basic Java applet that is capable of capturing a client's screen. By using a small piece of JavaScript code, I can initiate the applet and capture the active screen image. Howe ...

The functionality of md-checkbox is not compatible with ng-click

I need to store the position every time a checkbox is changed: <h1 class="md-display-2">Simple TODO ng app</h1> <h2 class="md-display-3"></h2> <div ng-include src="'todo/add.html'"></div> <div> &l ...

Various concatenated and compressed JavaScript files across multiple HTML documents within a single application

In my express.js application, I have different routes such as /home and /dashboard. For example, on the home page, I include: jquery.js, underscore.js, somemodule1.js, somemodule2.js. On the dashboard, I include: jquery.js, underscore.js, somemodule3.js, ...

The request has been unsuccessful with error code 405 in Nextjs version 14

I am currently working with NextJs version 14 and encountering a 405 error: GET http://localhost:3000/api/products 405 (Method Not Allowed) Uncaught (in promise) AxiosError products.js "use client" import { useState } from 'react'; ...

Improving iframe functionality in AngularJS

I've been experimenting with AngularJS to dynamically update an iframe whenever a query is triggered. It works like this: a query is made, the embed link is fetched from the database, and then it's used in the iframe alongside the title and video ...

How would you go about creating a VueJS component that displays a table with a set number of columns and automatically distributes the cells within them?

Hey there! I'm currently working with a VueJS component that looks like this: <template> <div> <table> <tbody> <tr v-for="(item, index) in items" :key="index"> <t ...

Java (Selenium) - initializing subclasses with a super class constructor

PageOne and PageTwo both require the use of methods from MasterPage (such as clicking Ok). I'm currently attempting to initialize both pages within the constructor of MasterPage. IntelliJ is prompting me to either add super(driver) to the constructors ...

Utilizing AJAX for sending data to a PHP database and automatically updating the page

Currently, I've implemented a button: <ul> <li><button onclick="display('1')">1</button></li> <li><button onclick="display('2')">2</button></li> <li><butto ...

The Node.js application gracefully exited with code 0 with Forever

Running a Node.js Express app on CentOs 6.5 using the root account: root@vps [/home/test/node]# npm start app.js > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="aedacbdddaee9e809e809f">[email protected]</a> s ...

Looking to create an anchor tag that navigates to a specific ID on the page while accommodating a fixed header placement

In my application, the homepage's carousel displays multiple images with dynamically generated anchor tags that link to different routes. When clicking on the anchor tag, the page scrolls to the linked image but is obstructed by a fixed header. I want ...