How do I display text in view with respect to a boolean variable in the $scope in angularjs?

Question

How do I display text in view with respect to a boolean variable in the $scope in angularjs?

Suppose I have a variable in the $scope:

$scope.smsProfile.Active

which can be true or false and I would like to display a text on the screen with respect to it's value. For example if it is true display "Profile active" and if it is false display "Profile not active". How can I do that?

I tried like this:

{{true:'Profile active', false:'Profile not active'}[$scope.smsProfile.Active]}

but it doesn't work.

binding
angularjs

Answer 1

Use ng-hide and/or ng-show directive:

<span ng-show="smsProfile.Active">Profile active</span>
<span ng-hide="smsProfile.Active">Profile not active</span>

Answer 2

Add a method in controller:

$scope.smsProfile= {
        Active: true,
        statusText: function () {
            return $scope.foo.Active ? 'active' : 'not active';
        }
    }

Then output the method in an expression or ng-bind

<span>Profile is {{smsProfile.statusText()}}</span>

DEMO:http://jsfiddle.net/zpfq4/