<!DOCTYPE html>
<html lang="en-us" >
<head>
<meta charset="utf-8">
<title>Food App</title>
</head>
<body>
<div ng-controller="foodController" ng-app="foodApp">
<input type="text" ng-model="foods" ng-change="handleFoodChange()" />
<input type="submit" value="Healthy Lunch?" />
<br />
<br />
<h4>{{outcome}}</h4>
{{foods}}
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"> </script>
<script src="food.js"></script>
<script src="foodController.js"></script>
</body>
</html>
foodApp.controller('foodController', function($scope)
{
$scope.handleFoodChange = function() {
$scope.outcome = $scope.foods;
if($scope.foods){
var foodsArray = $scope.foods.split(',');
if(foodsArray.length<=4)
$scope.outcome="Bon Appetit!";
else if(foodsArray.length<=7)
$scope.outcome="Pig!";
else
$scope.outcome="One at a time, your scale is going to shout!!";
}
}
});
'use strict';
var foodApp = angular.module('foodApp', []);