Conceal button in AngularJS upon clicking

Just started learning Angular and finding it difficult to follow the "Angular Way". I want to achieve a simple task of clicking a button to display a hidden element in a view, then hide the button that was clicked. Any tips or assistance would be greatly appreciated.

Here is the HTML snippet:

<button class="btn btn-primary" ng-click="showDiv=true; hideMe()">
  Show Div
</button>
<div ng-show="showDiv">
  I was hidden before, but now you can see me. How do I hide the button though?
</div>

And here is the controller code:

  $scope.hideMe = function(){
    console.log('hide the button');
    $scope.hide();
  }

If you'd like to check out a working example, feel free to visit this Plunker link.

My goal is to use

ng-hide
on the button itself without needing a function within the controller.

Answer №1

<button ng-if="hideDiv"...

This solution should function as well.

Answer №2

To make the button hidden when showDiv is true, simply include ng-show="!showDiv" in your button code.

Here is how your updated HTML should appear:

<button class="btn btn-primary" ng-click="showDiv=true" ng-show="!showDiv">Show Div</button>

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 is the best way to incorporate API calls within a React component's return using a select statement?

Here is the current structure of my component: import React, { useEffect, useState } from "react"; import Table from "../../../../Table/Table"; import { getBalance } from "../../../../../datasource/Financials"; export default ...

The specified file or package path did not contain any recognizable node name, resulting in an error in

Today I encountered an error while trying to install my package in Visual Studio. The error message displayed was: enter image description here The error message states: npm i npm ERR! could not detect node name from path or package A detailed log of thi ...

Clearly defined form field even with the inclusion of value=" "

I have a database that I am using to display data in an HTML form for user editing. <input type="text" id="name" placeholder="Name" required = "true" value = <?php if(isset($_SESSION['name'])) echo $_SESSION['name'] ;?>> ...

Put the code inside a function. I'm new to this

My goal is to encapsulate this code: if($(window).width() > 980) { $(window).on("scroll", function() { if($(window).scrollTop() > 20) { //add black background $(".x-navbar").addClass("active"); $(".x-navbar .desktop ...

Utilize module.exports to export objects containing callback functions

I am currently diving into the world of writing my own modules for nodejs. My goal is to create various objects that I can use throughout my application. Here is the result I am aiming for: //assuming we have a database: Person_table(ID int A_I, NAME var ...

JavaScript embedded within LD-JSON format

Is it feasible to run JavaScript code within an ld+json script? Like for instance, "window.location.hostname" <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "WebSite", "url": "http://" + window.location.ho ...

Ways to determine if a link exists on a page using Jquery

One element on my website is a link: <a href="https://mywebsite.com/terms-conditions-mywebsite" target="_blank">Terms and conditions</a> I'm looking to use Jquery to verify if this particular link appears on the webpage. While I have exp ...

Forward traffic to https using Node.js

I am attempting to redirect users from http://my-domain to https://my-domain. My initial thought was to utilize the .htaccess file, but it seems that this method does not work with Node.js. The following function is my effort to replicate the logic of .ht ...

What is the method to find the overall number of instances of the :contains() Selector by utilizing an Array with numerous matches within a DIV?

After inquiring about How to get the total instance of the :contains() Selector, I encountered a loop issue with my array when trying to retrieve the total matches using the contains:selector... In my scenario, these are the variables I am working with - ...

Iterate through a JavaScript array and dynamically populate multiple HTML elements with the values using a loop

I need a way to populate an array with numbers and dynamically insert those values into my HTML code in pairs. For instance, I want the value at array index 1 [0] to be 53498 and appear in both the value attribute and within the <div class="n1" ...

Discover the method for extracting the value from an array that has been transferred from a php script

So here's the situation - I have a text file containing data. The first step is to convert the content of the text file into an array. $lines = file($filename); Next, the data is sent back to the client (the $filename is determined through ajax). ...

Steps to create a toggle click event

I've been attempting to create a toggle click event using the code below: HTML <a class="load" data-gallery="123456" style="cursor: pointer;"><h2><p>example</p></h2></a> <div id="123456"> </div> j ...

Set up a loop that retrieves data from an array and dynamically populates the content of my template card component

I am working on a reactjs + typescript component that displays templates: My goal is to pass the template details like title, description, and image using an array. import ActionPageTemplateContainer, { Template } from "./ActionPageTemplateContainer& ...

Utilizing the jQuery slideToggle method on the specified target element

I'm encountering an issue with jQuery slideToggle, and here's the code I have: $(".dropdownmainmenu").click(function(){ $(this).children(".showmenu").slideToggle(); $(this).toggleClass("activemainmenu"); $(this).find(".showarrowmainmen ...

Utilizing React Developer Tools to easily click a button

Currently, I am working on building a card in React with Material UI. Here is the layout: https://i.sstatic.net/CFS58.png The button labeled Sign out has the functionality to change its state from true to false using React developer tools. However, I am ...

Tips on interpreting JSON objects and cross-referencing them with user input

I am currently developing an application where specific values are stored in JSON format and I aim to access these values through indexes rather than hard coding them. Below is a snippet of my HTML file combined with JavaScript: <html> <head> ...

implement a feature to dynamically include or exclude images using vue.js

var loaderGif = "https://www.tietennis.com/img/loaders/LoaderIcon.gif" var processingImageUrl = '<img id="imgProcessing" src="' + loaderGif + '" />' $(document).on("click", "input[name='PermissionID']", function() { ...

Ending the sluggish jsdiff operation in just 2 seconds

Currently, I am utilizing the npm library jsdiff. This library contains a function that is able to determine the difference between two strings. However, it's worth noting that this specific function is synchronous and when used with large, dissimilar ...

Unable to backtrack once a response has been sent

My Express application keeps crashing after sending a response to the client. It appears that the code continues to run even after the response has been returned. Can you please review the code snippet provided below? const EditUser = async (req, res) => ...

Problem with pointHoverBorderColor attribute in a line chart using angular-chart.js

Input color object is being used, but the property "pointHoverBorderColor" does not seem to be working with: Angular: 1.5.3, Chart.js: 2.6.0, Angular-chart.js: 1.1.1. vm.colors = [ { backgroundColor: "rgba(159,204,0, 0.2)", pointBackgroundColor: "rgba ...