Changing Text in AngularJS App

Question

I am learning AngularJS. I have an app with a controller that looks like the following:

function myController($scope) {
  $scope.isOn = false;
  $scope.flip = function() {
    $scope.isOn = !$scope.isOn;
  }
}

My view has the following code:

<div ng-controller="myController">
  <button ng-click="flip()">{{isOn}}</button>
</div>

I want isOn to be a true/false value in my controller. However, in my view I want to show "On" if the flag is true. If the flag is false, I want to show "Off". How do I do that? I thought I could possibly use a filter. However, I didn't have any luck with that approach.

Maxim Shoustin · Accepted Answer · 2013-11-23 13:49:33Z

2

Use poor mans ternary operator:

<div ng-controller = "fessCntrl"> 
  <button ng-click="flip()">{{(isOn) && 'On' || 'Off'}}</button>
</div>

Demo 1 Fiddle

or (from angularjs > 1.1.5)

<div ng-controller="ctrlRead"> 
  <button ng-click="flip()">{{isOn ? 'On' : 'Off'}}</button>
</div>

Demo 2 Fiddle

edited Nov 23, 2013 at 13:49

answered Nov 23, 2013 at 13:44

Maxim Shoustin

78k29 gold badges212 silver badges229 bronze badges

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

Comments

klode · Accepted Answer · 2013-11-23 15:57:43Z

1

Another alternative would be to do the logic in the controller

html template:

<div ng-controller="myController">
    <button ng-click="flip()">{{isOnLabel}}</button>
</div>

controller:

function myController($scope) {
    var isOn = false;
    $scope.isOnLabel= 'Off';
    $scope.flip = function() {
        isOn = !isOn;
        $scope.isOnLabel = isOn?'On':'Off';
    };
};

If you need isOn to be on the $scope then in the controller change isOn with $scope.isOn

function myController($scope) {
    $scope.isOn = false;
    $scope.isOnLabel= 'Off';
    $scope.flip = function() {
        $scope.isOn = !$scope.isOn;
        $scope.isOnLabel = $scope.isOn?'On':'Off';
    };
};

jsFiddle demo

edited Nov 23, 2013 at 15:57

answered Nov 23, 2013 at 14:51

klode

11.1k6 gold badges38 silver badges49 bronze badges

Comments

Chandermani · Accepted Answer · 2013-11-23 13:34:32Z

0

You can use the ?: operator

<div ng-controller="myController">
  <button ng-click="flip()">{{isOn?"On":"Off"}}</button>
</div>

Just verify your version of Anugular supports it.

answered Nov 23, 2013 at 13:34

Chandermani

42.7k12 gold badges88 silver badges89 bronze badges

Comments

Pipetus · Accepted Answer · 2013-11-23 14:05:25Z

0

You can also go with a filter (though probably it's not worth it). That way you would have something like:

<div ng-controller="myController">
    <button ng-click="flip()">{{isOn | toggleFilter}}</button>
</div>

answered Nov 23, 2013 at 14:05

Pipetus

1,1561 gold badge13 silver badges30 bronze badges

Collectives™ on Stack Overflow

Changing Text in AngularJS App

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related