Manipulate a pair of span elements with a singular function in AngularJS

Question

Manipulate a pair of span elements with a singular function in AngularJS

I have a pair of span tags and p tags as follows:

<span class="span1" ng-click="show()">Span_1</span>
<p class="p1" ng-show="var1">P_1</p>
<span class="span2" ng-click="show()">Span_2</span>
<p class="p2" ng-show="var1">P_2</p>

Using AngularJS, my goal is to create a single function like "show()" above that toggles both p tags. How can I achieve this? Here's the corresponding JavaScript code:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.var1 = false;
    $scope.show = function() {
        $scope.var1 = $scope.var1 === false ? true: false;
    };
});

When I click on Span_1, only the corresponding p tag should show, same for Span_2. This functionality should be achieved using just one function.

Check out the Plunker example here: http://plnkr.co/edit/fzgpV68Q7UnHGHmHffZZ?p=preview

javascript angularjs show-hide

Answer 1

Answer №1

Passing variables from HTML and implementing conditional logic using AngularJS.

//Angular code(js)

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.variableList = [{state:true},{state:false}];
    $scope.show = function(what,where) {
        switch(what){
          case 'display':
            return $scope.variableList[where].state;
            break;
          case 'click':
            $scope.variableList[where].state = !$scope.variableList[where].state;
            break;
          case 'class':
            return ($scope.variableList[where].state ? 'active' : '');
            break;
        }
    };
});

Usage(HTML):

<div ng-app="myApp" ng-controller="myCtrl">
  <div ng-repeat="item in variableList">
    <span ng-class="show('class',$index);" ng-click="show('click',$index)">Span_{{$index+1}}</span>
    <p ng-class="show('class',$index);" ng-show="show('display',$index)">P_{{$index+1}}</p>
  </div>
</div>

Answer 2

Passing variables from HTML and implementing conditional logic using AngularJS.

//Angular code(js)

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.variableList = [{state:true},{state:false}];
    $scope.show = function(what,where) {
        switch(what){
          case 'display':
            return $scope.variableList[where].state;
            break;
          case 'click':
            $scope.variableList[where].state = !$scope.variableList[where].state;
            break;
          case 'class':
            return ($scope.variableList[where].state ? 'active' : '');
            break;
        }
    };
});

Usage(HTML):

<div ng-app="myApp" ng-controller="myCtrl">
  <div ng-repeat="item in variableList">
    <span ng-class="show('class',$index);" ng-click="show('click',$index)">Span_{{$index+1}}</span>
    <p ng-class="show('class',$index);" ng-show="show('display',$index)">P_{{$index+1}}</p>
  </div>
</div>

Answer 3

Answer №2

If you want to create a toggle method that can switch the visibility of a specific element, you can use the following example code:

<html ng-app='myApp' >
  <body ng-controller="myCtrl">
<span class="span1" ng-click="toggle()">Span_1</span>
<p class="p1" ng-show="var">P_1</p>
<span class="span2" ng-click="toggle()">Span_2</span>
<p class="p2" ng-show="!var">P_2</p>
    </body>
  </html>

Here is the JavaScript code for this functionality:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.var = true;
    $scope.toggle = function() {
        $scope.var = !$scope.var;
    };
});

Answer 4

If you want to create a toggle method that can switch the visibility of a specific element, you can use the following example code:

<html ng-app='myApp' >
  <body ng-controller="myCtrl">
<span class="span1" ng-click="toggle()">Span_1</span>
<p class="p1" ng-show="var">P_1</p>
<span class="span2" ng-click="toggle()">Span_2</span>
<p class="p2" ng-show="!var">P_2</p>
    </body>
  </html>

Here is the JavaScript code for this functionality:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.var = true;
    $scope.toggle = function() {
        $scope.var = !$scope.var;
    };
});

Answer 5

Answer №3

To modify the value of either $scope.var1 or $scope.var2, you can pass a specific span number as a parameter to a function. The function will then toggle the value based on the parameter provided:

function updateValue(varParam) { 
    if (varParam === 1) {
        $scope.var1 = !$scope.var1; //toggle value    
    } else {
        $scope.var2 = !$scope.var2;
    }
}

In your template, you would call the function and pass the parameter like this:

ng-click="updateValue(1)"

Check out this Working Plunkr for a demonstration.

Answer 6

To modify the value of either $scope.var1 or $scope.var2, you can pass a specific span number as a parameter to a function. The function will then toggle the value based on the parameter provided:

function updateValue(varParam) { 
    if (varParam === 1) {
        $scope.var1 = !$scope.var1; //toggle value    
    } else {
        $scope.var2 = !$scope.var2;
    }
}

In your template, you would call the function and pass the parameter like this:

ng-click="updateValue(1)"

Check out this Working Plunkr for a demonstration.

Manipulate a pair of span elements with a singular function in AngularJS

Answer №1

Answer №2

Answer №3

Similar questions

Importing JavaScript into an Angular component: A beginner's guide

Ways to align div elements

Guide to making type-safe web service requests using Typescript

What is the best way to sum up array elements until they equal a target number, and then create objects using these summed values?

Using Angular JS to send and receive JSON data with Django Rest Framework comment form

Guidelines for implementing a database update post drag and drop action with JavaScript and AJAX?

Mobile phone carousel glitch

When the Promise object is assigned to the img [src], the image may occasionally be set to null

Issue with the dropdown functionality in an Angular reactive form

Incorporating SEO for a Flash-Based Website

Issues with Express routes - encountered POST 404 (Not Found) error

Utilizing blueimp to upload an image and implementing a function structure that shares similarities

Tips for handling alternate lines with two distinct styles in the Ace editor

Menu Styled <ul> Not Activating handlerOut

Angular 2 is throwing an error, stating that Observable is not defined

Angular not displaying input value correctly in first loop index

Can you share any recommendations or instances of modifying data within HTML tables using Laravel?

Every initial test with Protractor ends in failure

What techniques can I use in Angular to access and modify properties like validity in nested child scopes?

Verify if the link includes https:// while using angularjs