This is my view

<div class="container" ng-controller="LunchCheckController">
  <h1>Lunch Checker</h1> 
      <div class="form-group" >
          <input id="lunch-menu" type="text"
              placeholder="list ma 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="LunchCheckController()">
        Check If Too Much
      </button>
    </div>
    <div class="form-group message" id="result">
        <!-- Your message can go here. -->
        {{stack()}}
    </div>
</div>

This is my JavaScript

(function() { 
    'use strict';

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

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

    function LunchCheckController ($scope) {
        $scope.input = ""; //Taking input from the user
        $scope.stack = function(input) {
            var array = input.split(',');
            if (array.length < 3) {
                return "Enjoy";
            } else {
                return "You gotta Stop boy!";
            } // Splitting the input
        };
    }
})();

I am kinda new to Angular.js. My aim is to get the string and split it. After splitting I want to satisfy a situation where "If the number of items are more than 3,print enjoy" otherwise "Anything else".

This is my view

<div class="container" ng-controller="LunchCheckController">
  <h1>Lunch Checker</h1> 
      <div class="form-group" >
          <input id="lunch-menu" type="text"
              placeholder="list ma 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="LunchCheckController()">
        Check If Too Much
      </button>
    </div>
    <div class="form-group message" id="result">
        <!-- Your message can go here. -->
        {{stack()}}
    </div>
</div>

This is my JavaScript

(function() { 
    'use strict';

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

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

    function LunchCheckController ($scope) {
        $scope.input = ""; //Taking input from the user
        $scope.stack = function(input) {
            var array = input.split(',');
            if (array.length < 3) {
                return "Enjoy";
            } else {
                return "You gotta Stop boy!";
            } // Splitting the input
        };
    }
})();

I am kinda new to Angular.js. My aim is to get the string and split it. After splitting I want to satisfy a situation where "If the number of items are more than 3,print enjoy" otherwise "Anything else".

• javascript
• html
• angularjs

• 1 I reformatted your code to look visually correct, and it appears as though you either have a typo, or the function assigned to $scope.stack is incorrect. If you do have your if/else after a return, then it will never execute. – krillgar Commented Jan 6, 2017 at 18:27
• @krillgar Wait. Let me re-edit. Check now. – reeversedev Commented Jan 6, 2017 at 18:29
• Plunker please. – kind user Commented Jan 6, 2017 at 18:31
• 1 your ng-click should be stack(...) – Daniel A. White Commented Jan 6, 2017 at 18:31
• 1 <button class="btn btn-default" ng-click="LunchCheckController()"> looks wrong. – Daniel A. White Commented Jan 6, 2017 at 18:34

4 Answers 4

Should be like this:

<div class="container" ng-controller="LunchCheckController">
  <h1>Lunch Checker</h1> 
      <div class="form-group" >
          <input id="lunch-menu" type="text"
              placeholder="list ma 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>

JavaScript

(function() { 
    'use strict';

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

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

    function LunchCheckController ($scope) {
        $scope.input = "";
        $scope.message = "";
        $scope.stack = function() {
            // already can access $scope.input
            // dont need to pass to stack()
            var array = $scope.input.split(',');

            // set $scope.message
            // instead of returning String
            if (array.length < 3) {
                $scope.message = "Enjoy";
            } else {
                $scope.message = "You gotta Stop boy!";
            }
        };
    }
})();

Think about how the data flows:

• bind textbox to input
• click button run function
• check number of words
• set message

Learning Angular.js

First place to start is the Angular tutorials on their website.

https://docs.angularjs/tutorial

I didn't find them that useful at first, but they are the best place to start.

This video is a must if your new to angular, from 0 to hero in a few hours:

Introduction to Angular.js in 50 Examples

https://www.youtube./watch?v=TRrL5j3MIvo

Then I advise watching a few youtube videos by Misko Hevery, he invented angular at google, and explains it very well.

This playlist is a good place to start.

https://www.youtube./watch?v=k4qVkWh1EAo&list=PL53194065BA276ACA

He explains the best features and also where people get stuck often.

You need to pass input variable into stack function in the view like this {{stack(input)}}

Or use var array = $scope.input.split(','); instead of var array = input.split(',');

var str = "How are you doing today?";
var res = str.split(" ");

This is the basic javascript split function.

With angular, you need to make an input box an ng-model, lets say str1.

All you need to do is

var res = $scope.str1.split(" ");

now its simple.. check for res.length and you get your things done.

This is the JS

    (function () {
  'use strict';

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

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

  function LunchCheckController($scope) {
    $scope.input = "";
    $scope.message = "";
    $scope.stack = function () {
      // already can access $scope.input
      // dont need to pass to stack()
      var array = $scope.input.split(',');

      // set $scope.message
      // instead of returning String
      if (array.length < 3) {
        $scope.message = "Enjoy";
      } else {
        $scope.message = "You gotta Stop boy!";
      }
    };
  }
})();