Utilizing ng-model to control the visibility of a label or anchor tag

Here is the code snippet I am working with:

<div class="tabs DeliveryRightDiv">

            <label class="selected"><a>One</a></label>
            <label> <a>Two</a> </label>
            <label> <a>Three</a></label>

   </div>

I have a div that will be displayed based on whether the user has selected One, Two, or Three from the above options.

  <div flex layout="row" class= "mycls">
   <div flex  layout="row" id="myid">
            <div flex  layout="column" class="insideall">
                <label>{{Oneselectedvalue}}<span>Total </span></label>
            </div>
        </div>
 </div>

If the user selects Two, the expression value should be {{Twoselectedvalue}} instead of {{Oneselectedvalue}} (All values are stored in the controller).

I have attempted to add a model, but unlike an input box, I do not have a value to compare for showing or hiding content. Is there any suggestion on how this can be achieved within one div like this?

javascriptangularjs

Answer №1

Here is a suggestion to create a variable called "selectedValue" in your Angular controller:

<div class="tabs DeliveryRightDiv">

        <label class="selected"><a ng-click="selectedvalue = 1">One</a></label>
        <label> <a ng-click="selectedvalue = 2">Two</a> </label>
        <label> <a ng-click="selectedvalue = 3">Three</a></label>

</div>

Next, use the following code snippet:

<div flex layout="row" class= "mycls">
    <div flex layout="row" id="myid">
        <div flex layout="column" class="insideall">
            <span ng-hide="selectedvalue != 1"><label>{{Oneselectedvalue}}<span>Total </span></label></span>
            <span ng-hide="selectedvalue != 2"><label>{{Twoselectedvalue}}<span>Total </span></label></span>
            <span ng-hide="selectedvalue != 3"><label>{{Threeselectedvalue}}<span>Total </span></label></span>
        </div>
    </div>
</div>

Initialize the "selectedValue" variable using ng-click with the desired value (1 for One, 2 for Two, etc.), and then use ng-hide to display the selected option.

I haven't tested this on Angular 1.x, so please let me know if it works for you (tested on Angular 4).

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

Adjust the zoom level when a location is detected using Mapbox

I have been reading through the leaflet documentation and it mentions using the maxZoom option for location, but I am having trouble getting it to work (http://leafletjs.com/reference.html#map-locate-options). Whenever a user uses geolocation on my websi ...

javascriptleafletmapboxmapbox-gl

What modifications can be made to the code in order to show the upload progress for each individual file when uploading multiple files simultaneously?

I am currently working on an uploader that can handle multiple file uploads and displays the progress of each uploaded file. However, I am facing some difficulties in showing the progress of every individual file. Can anyone provide me with assistance? &l ...

javascriptjquery

Is it possible to add information to the form data object?

When I send an image to the server using form data, everything seems fine until I try to add data from a crop plugin. Here is the code snippet: //create form data from form var formData = new FormData($('#my-form')[0]); //append the image formD ...

javascriptphpjqueryajax

Passing Data Between Page and Component (NEXT.JS + LEAFLET Integration)

I have recently started using Next.js with Leaflet maps and have encountered a beginner's question. I created a page in Next.js ( /pages/map/[id].jsx ) that utilizes a component ( /component/Map.jsx ). Within the page ( [id].jsx ), I fetch a JSON fil ...

javascriptnext.jsleaflet

AngularJS: Enhancing Dropdown Menus

I currently have a pair of drop down lists. The first dropdown looks like this: <select ng-model="vm.eesAdminSetupData.Type" class="form-control" id="Type" name="Type" required> <option value="Form">Form</option> <option value="List ...

angularjsselectlist

What is the best way to retrieve the latest files from a Heroku application?

Having recently migrated my Discord Bot to Heroku, I faced a challenge with retrieving an updated file essential for code updates. I attempted using both the Git clone command and the Heroku slugs:download command with no success in obtaining the necessar ...

javascriptnode.jsgitherokudiscord.js

typescript error is not defined

While browsing online, I came across a post discussing how to transfer data from an MVC model to a .ts file. The suggestion was to include the following code: <script type="text/javascript"> var testUrl = @Html.Raw(Json.Encode(Model.testUrl) ...

javascripttypescriptmodel-view-controllerundefined

Setting up Vue CLI 4 with ESLint, TypeScript, Stylelint for SCSS, and Airbnb rules in the VS Code editor with automatic fixes on save

After struggling with configuring Vue CLI 4 with ESLint, Prettier, Airbnb rules, TypeScript, and Vetur, I found myself at a crossroads. The challenges continued to mount as the nature of the problem evolved from my previous attempts.: How to configure Vue ...

javascripttypescriptvue.jseslintvue-cli

The 'wrapper' property is not present in the 'ClassNameMap<never>' type in Typescript

Hey there, I've been encountering a puzzling issue in my .tsx file where it's claiming that the wrapper doesn't exist. My project involves Material UI and Typescript, and I'm relatively new to working with Typescript as well as transiti ...

javascriptreactjstypescriptmaterial-ui

Having difficulty incorporating custom JavaScript files into a testing framework

I am facing a unique challenge while integrating the Page Object design pattern into my test suite using selenium-webdriver and node.js. The first page object, pageObject/admin/login/index.js, works seamlessly. It contains selectors and methods to fill ou ...

javascriptnode.jsseleniumselenium-webdriver

Setting up Supertest and Express together is leading to a timeout error

In my server.test.js file, I have a straightforward setup: import 'regenerator-runtime/runtime'; const request = require('supertest'); const express = require("express") const app = express(); app.get('/user', func ...

javascriptnode.jsexpressjestjssupertest

Adding hue to the portion of text following a JavaScript split() operation

I need assistance in printing the text entered in a textarea with different colors. I am separating the string using the split() method, which works fine. However, I now want to print the substrings in the textarea with colors. How can this be achieved? & ...

javascripthtml

Pass the most recent properties to the mousemove event handler

I am currently developing a click-and-drag feature, which involves: setting up a moveListener on the onMouseDown event having the moveListener trigger an action that updates certain props of the component (props.whichChange) cleaning up the mouseUp event ...

javascriptreactjs

Receiving a sleek black overlay with dynamic text upon hovering over an image

I have been searching extensively for a solution to my issue, but I haven't been able to make it work in my application. What I want is to create a black overlay over an image when it is hovered over, with text that resembles a button appearing on top ...

javascriptjqueryhtmlcssimage

The URIError occurred while attempting to decode the parameter '/December%2015,%' within the express framework

After setting up a middleware using the express framework that handles a URI with a date as a parameter, I encountered a small issue. app.get("/:date",function(req,res){ var result; var myDate=req.params.date if(moment(myDate).isValid()) ...

javascriptnode.jsexpress

Decreased Performance in Vue Threejs with Larger JSON Data Sets

I am currently upgrading a legacy Three.js project from Angular 1.5 to Vue 2.6. The project is used for visualizing objects in JSON file format and I'm experiencing a drop in frame rate, going from ~60FPS in Angular to ~12FPS in Vue when loading large ...

javascriptvue.jsthree.js

Troubleshooting Issue: Incompatibility between AngularJS watchGroup() and Service modification

I am currently facing an issue where I cannot seem to watch multiple variables in a Service as they are being changed by other controllers. Here is what I have implemented: angular.module('carApp').controller('CarListCtrl', function ($ ...

angularjswatch

Why is the 'name' property used in the export default{} syntax?

Vuejs is my current learning focus, and one thing that puzzles me is the necessity of this particular name. <template> </template> <script> export default { name: 'NotFound' } </script> <style> </style&g ...

javascriptnode.jsecmascript-6vue.js

Does anyone know how to designate a Thumbnail when playing Audio on iOS Safari?

I recently launched a website to showcase my new podcast. The audio is embedded in a media player on the page, and when it's playing, it shows up on the Control Center audio tab and even on the lock screen. However, the thumbnail displayed is just a ...

javascripthtmliosthumbnailsmediaelement.js

Tips for sending an object in AngularJS to the HTTPOST method

I am facing an issue where I am trying to pass an object to my controller using the $http method, but even though the object has a value, the data being passed is showing as NULL. Below is the code snippet that demonstrates this problem. Within my JavaScr ...

javascriptangularjshttp