How to do angularjs if statement?

Question

I've got this code:

<html>
<head>
</head>

<div ng-app="" ng-controller="Test">
<input type="text" ng-model="inputty">
<p>{{output}}</p>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>    
<script>
  function Test($scope){
    if($scope.inputty=="Hello") {
      $scope.output="OK!";
    } else {
      $scope.output="NOT OK!";
    }
  }
</script>
</html>

But it's not working, the NOT OK! displays. But it's like the if statement can't read from inputty. So it should state OK! when I type Hello in the input box.

$scope.output = function(){ return $scope.inputty=="Hello" ?"OK!" : "NOT OK!"; } and do <p>{{output()}}</p> — PSL
– PSL, Commented Sep 10, 2014 at 19:20

V31 · Accepted Answer · 2014-09-10 19:20:52Z

3

You need to add in a watch in your controlller in order to check the value of inputty and inside the watch function have the if loop so that you can change the output scope variable

Code:

function Test($scope) {
    $scope.inputty = '';
    $scope.$watch('inputty', function () {
        if ($scope.inputty == "Hello") {
            $scope.output = "OK!";
        } else {
            $scope.output = "NOT OK!";
        }
    });
}

Working Fiddle - $watch

Reference for $watch

Alternatively,

You can do it alone in HTML markup using ng-switch

HTML markup

<div ng-app ng-controller="Test">
    <input type="text" ng-model="inputty" />
    <div ng-switch="inputty">
        <p ng-switch-when="Hello">OK!</p>
        <p ng-switch-default>NOT OK!</p>
    </div>
</div>

Working Fiddle - ng-switch

Reference for ng-switch

edited Sep 10, 2014 at 19:20

answered Sep 10, 2014 at 19:06

V31

7,6643 gold badges28 silver badges44 bronze badges

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

4 Comments

Elliott Coe Over a year ago

Sorry I'm quite new angular, is there an easier way to do this? I would have thought using a loop wouldn't be needed.

V31 Over a year ago

Its not a loop its a watcher function which will check the value of inputty ( an event in controller) so that controller then can check the value and set the output variable accordingly, otherwise an event needs to be thr in order to let the controller do the comparision

PSL Over a year ago

WHy watch/ng-switch etc.. it should be as simple as return $scope.inputty=="Hello" ?"OK!" : "NOT OK!";

Owen Over a year ago

In best practice, you should avoid polluting controller's with $watch. Once you have everything refactored into their file instead of all inline on the one html page, everything starts to get easier.

bruntime · Accepted Answer · 2017-04-11 17:46:09Z

0

If you only change your inputty through textbox, the easiest way is to use ngChange.

edited Apr 11, 2017 at 17:46

bruntime

3812 silver badges13 bronze badges

answered Sep 10, 2014 at 22:45

ABOS

3,8413 gold badges19 silver badges25 bronze badges

Collectives™ on Stack Overflow

How to do angularjs if statement?

2 Answers 2

4 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Related