How to split a string in Angular.js?

Issue

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 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="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".

Solution

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 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>

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.org/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.com/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.com/watch?v=k4qVkWh1EAo&list=PL53194065BA276ACA

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

Answered By - Phil Poore