AngularJS - Toggle Variable in one html tag

Question

Below you can see an example of my Code - The app is running fine, so when I click on 'Toggle', the app is switching between the two Variables.

<body>
<div ng-init="value = 'off'" ng-app='app' ng-controller="myctrl">
<h1 ng-click="value = { 'on': 'off', 'off':'on'}[value]; event.PreventDefault;">Toggle</h1>
  <h3 ng-show="value == 'on'" >{{var1}}</h1>
  <h3 ng-show="value == 'off'" >{{var2}}</h1>  
</div>

<script>
(function () {
'use strict';

angular.module('app', [])
.controller('myctrl', myctrl);

function myctrl($scope){
  $scope.var1 = "Its on";
  $scope.var2 = "Its off";
}
})();
</script>

Following Question: How can I implement this, or what is best practice that I just need one "h3" tag to switch between the variables ? Because I have a lot of other information in my html tag and I always repeating me for just toggle of two Variables...

fhollste · Accepted Answer · 2016-05-19 12:23:27Z

3

You can add the condition direcly in the curly brackets

<h3>{{value == 'on' ? var1 : var2}}</h3>

Demo: https://jsfiddle.net/rgvj1nca/

answered May 19, 2016 at 12:23

fhollste

7956 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

fhollste Over a year ago

yeah, and it's even cleaner if you use booleans for the conditions as @davide-lorenzo-marino pointed out

Davide Lorenzo MARINO · Accepted Answer · 2016-05-19 12:23:02Z

0

You can use boolean values to simplify the code

<div ng-app='app' ng-init='value = false;' ng-controller="myctrl">
   <h1 ng-click="value = !value; event.PreventDefault;">Toggle</h1>
   <h3 ng-show="value" >{{var1}}</h1>
   <h3 ng-show="!value" >{{var2}}</h1>  
</div>

<script>
(function () {
'use strict';

angular.module('app', [])
.controller('myctrl', myctrl);

function myctrl($scope){
  $scope.var1 = "Its on";
  $scope.var2 = "Its off";
}
})();
</script>

answered May 19, 2016 at 12:23

Davide Lorenzo MARINO

27k4 gold badges45 silver badges58 bronze badges

Comments

Aditya Singh · Accepted Answer · 2016-05-19 12:31:35Z

0

You can use single variable and toggle it's value in controller. This way the implementation is very clean and the you are not introducing a lot of variables

<body>
<div ng-app='app' ng-controller="myctrl">
  <h1 ng-click="toggleValue()">Toggle</h1>
    <h3>{{var1 ? 'Its on' : 'Its of' }}</h3>
  </h1>
</div>

<script>
  (function () {
    'use strict';

   angular.module('app', [])
    .controller('myctrl', myctrl);

   function myctrl($scope){

     $scope.toggleValue = function () {
       $scope.var1 = !$scope.var1;
     };

   }
  })();
</script>
</body>

See the working implementation in this JSBin: https://jsbin.com/tihiru/1/edit?html,js,console,output

answered May 19, 2016 at 12:31

Aditya Singh

16.8k15 gold badges49 silver badges70 bronze badges

Collectives™ on Stack Overflow

AngularJS - Toggle Variable in one html tag

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related