Toggle the visibility of the search Div using Angular UI

When using angular UI buttons, users can select search criteria by choosing between Patient, ID, or Date. If Patient or ID is selected, the searchByText div will be shown. If Date is selected, the searchByText will be hidden and the SearchBydateRange will be displayed. However, there is an issue with the Angular show and hide functionality in my code. I referenced this Codepen example for help: http://codepen.io/SusanneLundblad/pen/iBhoJ

<div class="panel-body">
        <form role="form">
            <div class="col-md-7">
                <div id="searchByText" class="form-group form-group-search" ng-hide=" searchOption == 'date'">
                    <label class="sr-only" for="search">Enter Search</label>
                    <input type="text" class="form-control" id="search" placeholder="Enter {{searchOption}} ..." data-ng-model="searchText">
                </div>
                <div id="SearchBydateRange" class="form-group form-group-search col-md-4" data-ng-show=" searchOption  == 'date' ">
                    <label class=" sr-only" for="search">
                        Enter Search
                    </label>
                    <input type="text" class="form-control col-md-2" id="search" placeholder="From Date" data-ng-model="fromDate">
                    <input type="text" class="form-control col-md-2" id="search" placeholder="To Date" data-ng-model="toDate">
                </div>
            </div>
            <div class="col-md-4 text-center">
                <div class="btn-group btn-group-sm" data-ng-hide="userIsManager">

                    <label class="btn btn-searchsel" ng-model="searchOption" btn-radio="'patient'">Patient</label>
                    <label class="btn btn-searchsel" ng-model="searchOption" btn-radio="'id'">ID</label>
                    <label class="btn btn-searchsel" ng-model="searchOption" btn-radio="'Date'" va>Date</label>
                </div>
            </div>
            <div class="col-md-1">
                <button type="submit" class="btn btn-sm btn-info btn-search full-width" data-ng-click="doSearch()">Search</button>
            </div>
        </form>
    </div>

Answer №1

Revise the button section as follows: (use label or radio, ng-click is crucial)

<div class="col-md-4 text-center">
            <div class="btn-group btn-group-sm" data-ng-hide="userIsManager">
                <input type="radio" ng-model="searchOption" value="patient" ng-click="searchOption = 'patient'">Patient</label>
                <input type="radio" ng-model="searchOption" value="id" ng-click="searchOption = 'id'">ID</label>
                <input type="radio" ng-model="searchOption" value="Date" ng-click="searchOption = 'date'">Date</label>
            </div>
        </div>

Next, modify the search divs:

<div class="col-md-7">
            <div id="searchByText" class="form-group form-group-search" ng-hide=" searchOption == 'date'">
                <label class="sr-only" for="search">Enter Search</label>
                <input type="text" class="form-control" id="search" placeholder="Enter {{searchOption}} ..." ng-model="searchText">
            </div>
            <div id="SearchBydateRange" class="form-group form-group-search col-md-4" ng-show=" searchOption  == 'date' ">
                <label class=" sr-only" for="search">
                    Enter Search
                </label>
                <input type="date" class="form-control col-md-2" id="search" placeholder="From Date" ng-model="fromDate">
                <input type="date" class="form-control col-md-2" id="search" placeholder="To Date" ng-model="toDate">
            </div>
        </div>

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

Issue with Bootstrap landing page layout - Container not adjusting to screen size correctly

Currently, I am engaging in a project to develop a landing page using Bootstrap as part of my practice. Unfortunately, I encountered an issue with the layout as the container does not align properly with the screen size. This imbalance causes the screen or ...

Enhancing user experience with CSS dropdown menu animations

I've been working on adding a dropdown transition to my menu, but I can't seem to get it right. Can anyone point out where I'm going wrong or what needs to be added for the transition effect on the dropdown menu? Here is the CSS and HTML cod ...

"ng2-file-uploader necessitates a browser refresh in order to function

I am currently utilizing ng2-file-upload within my Angular 10 project to allow users to upload their photos. The upload process is functioning correctly, but the issue arises when the newly uploaded photo does not automatically appear in the photo list wit ...

Make an ajax call without any parameters and then in PHP, verify if the variable is

I have a code snippet that is currently functional. I am looking to remove the URL and handle the AJAX request on the same page. Since no data is being sent, how can PHP be used to determine when the AJAX function is ready to send a request to the database ...

Issue with Checkbox Values Being Passed Incorrectly in Jquery

Trying to create interactive checkboxes on my website that trigger a pop-up when a specific value is selected. I've almost got it working, but for some reason, the alert message always shows "question1" regardless of which checkbox is ticked. <scr ...

The try/catch block fails to execute or capture any errors

I'm attempting to create a help command that notifies users in case of closed DMs, but it's not working as expected. Despite encountering an error, the original messages are still sent instead of executing the catch function. I am relatively new ...

The battle between Hover, Focus, and Blur modes intensifies

My goal is to implement 4 different effects on an element: When hovering over the element. When moving away from the element. When focusing on the element. When blurred. However, I'm encountering a conflict where when I focus on the element, the ...

Adjust the styling of the minimized file input to work like a download button when the window is resized

I successfully minimized the fileInput function by removing the upload area and loading bar, giving it a similar appearance to a downloadButton. However, I'm facing difficulties in determining which part of the CSS code needs to be modified to make it ...

Not every image is contained within a DIV element

My current challenge involves wrapping an img element with a div. The issue I am facing is that the image is loading to the left of the div. I have already set the dimensions of the div to match those of the image, but it still loads incorrectly. I've ...

Updating a property in an object within an Angular service and accessing it in a different controller

I am currently utilizing a service to transfer variables between two controllers. However, I am encountering difficulties in modifying the value of an object property. My goal is to update this value in the first controller and then access the new value in ...

Troubleshooting varying <li> heights in Google Chrome with CSS

Kindly review the image enclosed below ul li{ width:100px; height:200px; float:left; border:10px double #333; -webkit-border-radius: 10px; -moz-border-radius: 10px; } <ul> <li><a href="image.jpg"><img src ...

What is the process for updating the background image in Ionic?

Currently facing an issue with setting an image for background in Ionic. The code provided doesn't seem to be working as expected. It appears that the style sheet is not being applied correctly. Not sure where exactly to add the style sheet or how to ...

Dynamically hiding elements within tabs using jQuery

Previously, I created a functionality for handling a single set of tabs. However, as the application has expanded, this functionality is no longer sufficient to accommodate multiple sets of tabs. The initial function looked like this: var iconTabs = func ...

Vue function displays 'undefined' message

Although many posts on this topic exist already, I am struggling to understand what is going wrong (even after searching extensively here and on Google). I have created my interceptor like this, but I keep receiving an error message stating "This is undef ...

Tips for formatting list items to display quotes in a scrolling ticker

How to format the <li> element HTML: <div id="patTest" style="width: 95%; padding: 0; margin: 0; text-align: center;"> <ul id="patTestUL"> <li> <div style="padding: 0; margin: 0; width: 98%;" ...

Conceal the Submit button upon completing the form submission using the load method

When creating a form and sending a request to another page, I use the following code: $(document).ready(function() { $("#send").click(function() { var text = $("#text").val(); var email = $("#email").val(); $("#exp").load("sendmail.php",{text: ...

Troubleshooting email delivery issues with contact form submissions in PHP

Can anyone assist me in identifying where I'm going wrong with this? Every time I click 'send', the form just directs to the PHP code. I've been experimenting with it for hours and I feel like I must be overlooking something simple. I&a ...

Utilizing PHP for loading a fresh webpage within a specific div element of an existing page through AJAX

<!doctype html> <head> <title>Homepage</title> <style> #header{background-color:#09C; width:100%; height:100px;} #logoandsearch{background-color:#603; width:400px; height:40px; float:left; margin-top:30px; margin-left:1 ...

Discovering identical objects by property and combining them with the help of JavaScript or UnderscoreJS

Below is an array that I have: var somevalue = [{ code: 1, name: 'a1' }, { code: 2, name: 'b1' }, { code: 1, name: 'a2' }, { code: 1, name: 'a3' }, { code: 2, name ...

Troubleshooting inconsistent htaccess changes across different pages?

After much trial and error, I have successfully managed to run PHP code within a document that has either an .htm or .html extension. The solution that worked for me was adding the following line of code: AddType application/x-httpd-php .php .html .htm N ...