Display/Collapse SELECT choices?

Consider this scenario :

  <select class="form-control" name="blah" ng-model="$ctrl.form.blah" ng-options="item.id as item.name group by item.etype | uppercase for item in $ctrl.opts"></select>

My goal is to toggle the display of each GROUP by clicking a corresponding group-button. For instance, I want a button for each group that, when clicked, will hide or show the specific group-options within the select-box.

Is there a way to achieve this functionality?


I managed to implement it using Yatrix's filter method and passing the component controller as an argument. This enables me to access the necessary variables to determine which options to filter.

The only issue now is that I can no longer utilize the line:

ctrl.form.select_box = ctrl.opts[0].id

Is there a workaround to set the default option given this constraint?


This is the final approach I adopted :

  <select class="form-control" name="blah" ng-model="$ctrl.form.blah" ng-options="item.id as item.name group by item.etype | uppercase for item in $ctrl.opts | blah:$ctrl"></select>

angular.module('myapp').filter('blah', function() {
return function(items, ctrl) {
    rv = [];
    angular.forEach(items, function(item) {
        if (ctrl.blah_f1 && item.etype == 'type1') rv.push(item);
        if (ctrl.blah_f2 && item.etype == 'type2') rv.push(item);
    });
    return rv;
};
});

I acknowledge that directly accessing the controller may not be ideal, but I have yet to find a cleaner method to influence the filter. The flags are manipulated by two buttons acting as radio/checkboxes, ensuring at least one button remains active while allowing both to be selected simultaneously. This gives users control over which "type" of items appear in the select-box.

Answer №1

You have the option to implement a custom filter in order to sort out specific items on the frontend. Once you toggle it off, those items will be included back into the list.

   .filter('myFilter', function () {
      // items = your options
      return function (items) {
        var filtered = [];

        for (var i = 0; i < items.length; i++) {
          var item = items[i];

          // introduce a property to track removed items
          if (!item.removed) {
            filtered.push(item);
          }
        }

        // display only items that haven't been removed
        return filtered;
      };
    });

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

Repeated function calls are common in Node.js

Having recently ventured into the world of node js, I encountered an issue when trying to use a python call for data retrieval. The process was quite complex and caused delays in execution and response reception by node js. The code snippet provided below ...

AngularJS mobile navigation menu toggle not functioning properly with the close feature

I am currently developing a simple Single Page Application (SPA) using an HTML template. The template includes a mobile navigation menu, but I am facing issues with it not closing when navigating through routes in AngularJS. Can anyone provide guidance on ...

Load the values into the dropdown list based on the selection from the previous dropdown menu

Currently, I am working on implementing cloning functionality for select boxes. There are 3 select boxes: country, state, city. The user selects the country first which then populates the state select box based on the ID, and similarly, the city dropdown ...

Animated text in ThreeJS

I'm interested in finding a way to animate text in ThreeJS that doesn't involve placing it directly on a plane. My ideal scenario would be to have the text appear as 2D, floating above a model. I've experimented with using divs positioned ou ...

Tips for utilizing the for each function within a for loop

Looking to showcase prices alongside each product based on their unique sku value, I've put together a price list. An array of data is being iterated through and pushed into the div container. var arr = [ { "sku": "552", "title": "orange", "pric ...

Discovering the selected href URL using JQuery or JavaScript

How can I detect the clicked href URL using JQuery when no ID is being used? For example, if I have a list of links where some redirect to new pages and others call javascript functions to expand a div. What approach should be taken in JQuery/Javascript ...

Utilizing Material-UI components for a seamless navigation button experience

After reviewing the example on https://material-ui.com/guides/composition/#button, I have implemented a button in my main page: <BrowserRouter> <Box m={2}> <Button size="large" variant="cont ...

The page remains static even as the function is executed

Having trouble with creating a sliding form using jQuery. The issue is that instead of sliding to the desired page, it slides to a blank one. The website where this problem can be seen is www.entrilab.com. Upon inspecting the element, there are no errors ...

Providing data in response to a completed form submission

As a beginner, I'm attempting to accomplish the following task: a user selects options from three dropdown menus within a form, and the chosen values are then sent to another file for processing. action="process.php" method="post" In the processing ...

I noticed that my jquery code is injecting extra white space into my HTML5 video

Ensuring my HTML5 background video stays centred, full-screen, and aligned properly has been made possible with this jQuery snippet. $(document).ready(function() { var $win = $(window), $video = $('#full-video'), $videoWrapper = $video. ...

The most recent release of Chrome (Version 47.0.2526.80 m) introduces an intriguing feature. When using navigator.webkitGetUserMedia, the returned stream now lacks a

I recently encountered a problem with my code that used to access the camera on Chrome browser and release it after use. Here's the code snippet: Starting the Camera: navigator.webkitGetUserMedia($scope.options.videoObj, function (stream) { $sco ...

What is the reason behind the for of loop breaking within an async function instead of properly awaiting the execution?

Update 2: I made changes to use setTimeOut instead, which fixed the issue. Check out the accepted answer for details on what was causing the error. The code below is now functioning properly. async function getSlices() { const imgBuffs = await sliceImg ...

Navigation menu with submenus containing buttons

I attempted to incorporate a dropdown into my existing navigation bar, but unfortunately, the dropdown content disappeared after adding the necessary code. I am now at a loss on how to troubleshoot this issue and make the dropdown function properly. Despit ...

What is the process for sending a parameter in getStaticProps within Next.js

Is there a way in NextJS to call an API when a user clicks the search button and display the relevant result? Thanks for your input! The API I'm currently utilizing is , with "Steak" referring to the specific food item of interest. In my development ...

"Encountering a halt in my Node.js Application as it waits endlessly

I'm currently following a tutorial on creating a collaborative canvas drawing application using Node.js and Socket.io. I've included the source file below which is used to create the server. However, when I try to open it in my browser, it gets s ...

JavaScript: How to identify and select a specific item from a context menu

Currently diving into the world of JavaScript, so please keep that in mind when explaining. My main goal is to figure out a way to detect when a user triggers a right-click or uses the context menu from the keyboard. Specifically, I want to know if they s ...

Use YUI to parse JSON data enclosed in square brackets and curly braces within a packet

Recently, I have been diving into the world of JSON, JavaScript, and YUI while working on a homework assignment. The JSON packet I am dealing with has the following structure: [{"id":"1234", "name":"some description","description":"url":"www.sd.com"}, {sa ...

What steps should I follow to integrate Semantic UI into a project using React and Express?

As a newcomer to Semantic/React/Express, I am wondering how to incorporate the stylesheet for Semantic in React. Do I need an html file that directly references the Semantic css and JavaScript files? Currently, I am not utilizing any html files. In my mai ...

Is it normal for the protractor cucumber tests to pass without observing any browser interactions taking place?

Having recently started using protractor cucumber, I have created the following feature. Upon launching protractor protractor.conf.js, the browser opens and immediately closes, displaying that my tests have passed. Is this the expected testing behavior? Sh ...

Tips for implementing the new useState value in your code

Using DataGrid Material UI, I am facing an issue where the selected row is not being deleted when clicking on the delete button. The problem arises from setting the ID value in the useState hook and encountering asynchronous behavior in deleting the rows. ...