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

Question

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?

javascript angularjs

Answer 1

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).

Answer 2

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).

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

Answer №1

Similar questions

Discover the steps to retrieve a fresh array in PHP after utilizing sortable.js

What is the best way to utilize typed variables as types with identical names in Typescript?

The Angular @HostListener beforeunload Event is a powerful way to handle

Is the presence of the selenium webdriver being registered?

What advantages does the use of $(e).attr(name,value) offer compared to using e.setAttribute(name,value)?

Exploring Laravel 4: Controlling AJAX data manipulation via the controller

Node.js Error: The requested URL cannot be found

When a text is wrapped by an HTML div using absolute positioning, is there a way to prevent it from wrapping without relying on white space

I'm puzzled as to why a div tag suddenly becomes invisible when I attempt to link it with a v-for directive in my code

Is there a way for my directive to prevent drag action when the dragleave event is triggered?

switchMap: Triggering multiple requests simultaneously (2)

The method this.$el.querySelector does not exist

Looping through multiple JSON requests using $.getJSON without the use of the let statement to ensure cross

Having Trouble Retrieving Environment Variables in Next.js API Endpoints

Is there a more efficient method to select all the rows containing '1's in a specific cell within a large range of data?

What factors influence Redux in determining when to update the user interface?

Extract and loop through JSON data containing various headers

The console is being flooded with API logging messages multiple times

Error thrown in JavaScript when calculating the distance

Exploring AngularJS: Enhancing User Experience with Dynamic Dropdowns and