CODEWITHSUNDEEP
javascripthtmlangularjs
Gondul
Gondul

Reputation: 11

AngularJS problem arises with interpolation in HTML vs if/else statemetns

This is my view: 

<!doctype html>
<html lang="en" ng-app="LunchCheck">
  <head>
    <title>Lunch Checker</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="angular.min.js"></script>
    <script src="app.js"></script>"
    <link rel="stylesheet" href="styles/bootstrap.min.css">
    <style>
      .message { font-size: 1.3em; font-weight: bold; }
    </style>
  </head>
<body>
  <div class="container" ng-controller="LunchCheckController">
     <h1>Lunch Checker</h1>
     <div class="form-group" >
         <input id="lunch-menu" type="text"
             placeholder="list comma separated dishes you usually have for lunch"
             class="form-control" ng-model="input">
     </div>
     <div class="form-group">    
       <button class="btn btn-default" ng-click="stack()">
         Check If Too Much
       </button>
     </div>
     <div class="form-group message" id="result">
       <!-- Your message can go here. -->
       {{message}}
     </div>
  </div>

  </div>
  </div>
</body>
</html>

This is my JS: 

(function() {
    'use strict';

    angular.module('LunchCheck', [])
    .controller('LunchCheckController', LunchCheckController);

    LunchCheckController.$inject = ['$scope'];

    function LunchCheckController ($scope) {
        $scope.input = "";
        $scope.message = "";
        $scope.stack = function($scope, input) {

            var array = $scope.input.split(',');

            if (array.length <= 3) {
                $scope.message = "Enjoy";
            } else if (array.length > 3){
                $scope.message = "Please stop!";
            } else ($scope.input == " " || Null ) {
                $scope.message = "Please enter something."
            }
        };          
    }
    };
    }
})();

My problems basically start whenever I try to use the: 

else ($scope.input == " " || Null ) {
    $scope.message = "Please enter something."
}

I'm a complete beginner, but I'm not sure what I'm doing wrong. Sorry if it's messy, I've probably been pasting and editing too much.

Basically when I try to open it in my browser I get the double curly braces under my input window saying {{ message }}

Upvotes: 1

Views: 56

Answers (1)

georgeawg
georgeawg

Reputation: 48968

Basically when I try to open it in my browser I get the double curly braces under my input window saying {{ message }}

When you see double curley brackets ({{ }}), it usually means the AngularJS framework did not load.

Check the Developer Console for error messages.

Uncaught SyntaxError: Unexpected token {        app.js:20

The problem is at line 20:

function LunchCheckController ($scope) {
    $scope.input = "";
    $scope.message = "";
    $scope.stack = function($scope, input) {

        var array = $scope.input.split(',');

        if (array.length <= 3) {
            $scope.message = "Enjoy";
        } else if (array.length > 3){
            $scope.message = "Please stop!";
        ̶}̶ ̶e̶l̶s̶e̶ ̶(̶$̶s̶c̶o̶p̶e̶.̶i̶n̶p̶u̶t̶ ̶=̶=̶ ̶"̶ ̶"̶ ̶|̶|̶ ̶N̶u̶l̶l̶ ̶)̶ ̶{̶
        } else {
            $scope.message = "Please enter something."
        }
    };
}

Upvotes: 1

Related Questions