Is there a way to make a button active while deactivating the others in Ionic V1?

<div class="row rowpesquisa">
        <div class="col col-100 colpesquisatop">
        <div class="col col-25">
            <button class="button button-icon buttonsearch" ng-model="butpontoenc" ng-click="butpontoenc.clicked=!butpontoenc.clicked" ng-class="!butpontoenc.clicked?'button-tueddin':'button-tueddin'">
                <img src="img/pesquisar/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8de4ee..." ng-show="!butpontoenc.clicked">
                <img src="img/pesquisar/iconePontoDeEncontroverde.svg" ng-show="butpontoenc.clicked">
            </button>
        </div>
        <div class="col col-25">
            <button class="button button-icon buttonsearch" ng-model="butpessoas" ng-click="butpessoas.clicked=!butpessoas.clicked" ng-class="!butpessoas.clicked?'button-tueddin':'button-tueddin'">
                <img src="img/pesquisar/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="acc5cfc3c2c9fcc9df..." ng-show="!butpessoas.clicked">
                <img src="img/pesquisar/iconePessoasverde.svg" ng-show="butpessoas.clicked">
            </button>
        </div>
        <div class="col col-25">
            <button class="button button-icon buttonsearch" ng-model="butpontotur" ng-click="butpontotur.clicked=!butpontotur.clicked" ng-class="!butpontotur.clicked?'button-tueddin':'button-tueddin'">
                <img src="img/pesquisar/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ef868c80818abf80..." ng-show="!butpontotur.clicked">
                <img src="img/pesquisar/iconePontosTuristicosverde.svg" ng-show="butpontotur.clicked">
            </button>
        </div>
        <div class="col col-25">
            <button class="button button-icon buttonsearch" ng-model="butlocais" ng-click="butlocais.clicked=!butlocais.clicked" ng-class="!butlocais.clicked?'button-tueddin':'button-tueddin'">
                <img src="img/pesquisar/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="98f1fbf7f6fdd4f7fb..." ng-show="!butlocais.clicked">
                <img src="img/pesquisar/iconeLocaisverde.svg" ng-show="butlocais.clicked">
            </button>
        </div>
        </div>
    </div>

I currently have this code snippet for a search page with 4 filter buttons. However, I want each filter to be shown individually and not sum up with others when clicked. How can I achieve this functionality?

Thank you!

javascriptangularjsionic-framework

Answer №1

Do you want these buttons to function like radio buttons?

An easy fix would be to update their attributes on each click event. For example, the first button could be changed to:

ng-click="button1.active = true; button2.active = false; button3.active = false; button4.active = false;"

You can apply this logic to all buttons individually or create a controller method that handles setting the attributes for each button in a loop.

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

What issue is there with the href attribute in the pug file?

/users/mihir/users/[object%20Object]/file.txt My pug file and JS code are set up to render a pug page with links for directories and files in the specified path. The problem arises when adding "users/" plus a username before the directory or filename whil ...

javascriptnode.jsexpresspug

Deactivate input fields within div elements that are not currently selected

Is it possible for me to disable input fields within a div based on a certain variable? Specifically, if the id of the div is not equal to 12, I would like to disable all input fields inside. Can someone assist with how to achieve this using jQuery? Much ...

javascripthtmljquery

Validating forms in ReactJS

I have developed a basic form validation feature for React. The inspiration for this project came from the following source: When I try to submit the form, input errors arise within the isValid function. I am seeking assistance in resolving this issue. A ...

javascriptreactjsformsvalidationmaterial-ui

halt execution of npm test and erase any printed content

When I run npm test on my React project, it runs unit tests using jest and react testing library. The test logs (including console log lines added for debugging) are printed to the screen but get deleted after running the tests. It seems like the logs are ...

javascriptnpmjestjs

retrieve information using Python in JavaScript

I am in the process of developing a website using Python, Javascript (JQuery), and AJAX. While I know how to initiate a Python script with Ajax, I am unsure of how to send data back to Javascript from Python. For instance, if there is an error in a form s ...

javascriptpythonajaxalert

Strip newline characters from information in AngularJS

What is the recommended approach for detecting and formatting the "\n\n" line breaks within text received from the server before displaying it? Check out this Fiddle: http://jsfiddle.net/nicktest2222/2vYBn/ $scope.data = [{ terms: 'You ...

javascriptjsonangularjs

Is it possible to include a JavaScript file within a partial view in ASP.NET MVC?

In my asp.net-mvc website, the top section contains filter information while the middle section displays reports. I have several different report formats that I want to toggle between. Currently, I am using partial views loaded via ajax to switch between r ...

javascriptjqueryajaxasp.net-mvcpartial-views

Steps to extract a value from a Promise

I've encountered some challenges with Promises and I'm curious to delve deeper into how they operate. In my current project, I'm utilizing the Bookshelfjs ORM to retrieve data from Postgres. The code snippet below represents my current focu ...

javascriptpostgresqlexpresspromisebookshelf.js

The user in req.session is not defined within a Next.js iron-session

I'm currently working on a dashboard for our team's bot that utilizes next.js and iron-session. However, I've run into an issue where req.session.user is showing up as undefined when I try to save the session. How can I go about fixing this ...

javascriptsessionnext.js

"Encountered an error with the code example for partitioning routes in Express.js

Note: For those who are new to this, there is an error in the Express documentation example. Make sure to include the next(); statement in your code like so: people.use(function(req, res, next) { next();//This line is necessary for the example to work ...

javascriptnode.jsexpressdirectory

My locale NUXT JavaScript files are being blocked by Content Security Policy

I've been working on implementing CSP headers for my website to ensure data is loaded from trusted sources. However, I'm facing an issue where CSP is blocking my local JS files. Here's a snippet from my nuxt.config.js: const self = 'lo ...

javascriptvue.jssecuritynuxt.js

What is the most efficient method for importing mixins into vue.js?

Within my project, I have developed numerous mixins. Currently, my approach involves importing all of these mixins in the 'mixins/index.js' file and then importing them as needed in various components or pages. However, I am now questioning whet ...

javascriptvue.jsmixins

Tips for isolating all the Javascript loaded via ajax or jquery.load within a specific child scope instead of a global scope

I am currently working on a solution to embed a third-party page into my site using ajax/jquery.load() to avoid using iframes (CORS requirements are already handled by the third party). My dilemma lies in the fact that the main host site loads jquery 1.x ...

javascriptajaxiframewebclosures

Javascript's asynchronous initiator

Starting a variable synchronously has been a common practice. const x = call_a_sync_function(); However, issues arise when the initiator switches to async. const x = await call_an_async_function(); // SyntaxError: Unexpected reserved word I experimente ...

javascriptnode.jsasynchronousecmascript-6async-await

React.js: If you encounter this file type, make sure to set up the necessary loader as no loaders are currently set to process it

I encountered an issue while working on my React project with Material Kit React framework. Specifically, I needed to use NavPills from Material Kit React, but when I attempted to run the npm server, I received the following error message: ERROR in ./node_ ...

javascriptreactjsnpmwebpack

Error: ChunkLoadError encountered when trying to load the "blogs-component" chunk in Laravel Vuejs

Despite smooth functioning on local development, my Laravel + Vuejs project is encountering ChunkLoadError on 2 pages. After consulting similar cases on SO and confirming the file's existence in the output path, the issue persists. The affected page ...

javascriptvue.js

The integration of a slideshow feature into the Ionic side menu template app is currently experiencing technical difficulties

As a beginner in Ionic and AngularJS, I suspect I may be making a silly mistake but cannot figure out what it is. The issue arises when using the ionic starter template for a side menu app. I added a new menu item for a 'new home' page and includ ...

angularjsionic-framework

"Enhance your audio experience across all browsers with the revolutionary

I am looking for a way to play an mp3 file endlessly when the user opens my website. I need a lightweight crossbrowser solution that works in all browsers, including IE. Any suggestions? ...

javascriptjqueryhtmlcssmp3

Get the value from AJAX and input it into the text box through PHP

I'm attempting to retrieve database results to check the availability of a username, but I'm not receiving any Ajax response. Below is the HTML code: <form id="user_form"> <input placeholder="Enter username" type="text" name="aj ...

javascriptphpjqueryajax

It appears that the Basic Authorization Header may have been misplaced

Currently, I am working on a Flask RESTful server and an AngularJS client. However, I have encountered a problem where it seems like the username and password information is not being transmitted properly. Upon inspecting the Javascript console, I can see ...

angularjsflaskbasic-authenticationflask-httpauthflask-cors