Angular1 Executing Scope Function

angular1

// Angular 1 - Scope - Executing Scope Methods:

In this topic, we'll talk about executing scope function in response to user 
input or events.

angular.module('myApp').controller('MainController',['$scope','$interval', 
  function($scope, $interval) {
    var items = ['bananas', 'apples', 'pears', 'cherries', 'peaches'];
  }
]);

In the above code, items is a private variable, that is not accessible outside 
of our controller function, and it is not accessible to the user interface, or 
the view.  We can decide whether or not we want our variables to be internal to 
our controller function, or exposed to the outside by attaching them to the 
scope.  Consider:

angular.module('myApp').controller('MainController',['$scope','$interval', 
  function($scope, $interval) {
    var items = ['bananas', 'apples', 'pears', 'cherries', 'peaches'];
    $scope.itemIndex = null;
    $scope.currentItem = "";
  }
]);

In the above code, we added two variables to the scope, one is called itemIndex, 
which is going to store the numeric value pointing to the specific item in the 
items array.  The other one, called currentItem, will be hold the string value 
of the currently selected item.

Next, we will add a function named getItem to the scope:

angular.module('myApp').controller('MainController',['$scope','$interval', 
  function($scope, $interval) {
    var items = ['bananas', 'apples', 'pears', 'cherries', 'peaches'];
    $scope.itemIndex = null;
    $scope.currentItem = "";
    $scope.getItem = function() {
      $scope.currentItem = items[$scope.itemIndex];
    };
  }
]);

This function uses the itemIndex from the scope, and pulls from the items array 
and assign it to the currentItem variable of the scope object.

Next, we add the ng-model attribute to our HTML:

<input type="text" ng-model="itemIndex">

In the above code, ng-model is a string that corresponding to the name of a 
variable in the scope object.

ng-model is interesting because it creates a two-way binding between the 
corresponding variable in the scope object and the DOM element that contains the 
ng-model attribute.  Whenever, the user changes the value for this DOM element, 
Angular will automatically change the value of the corresponding variable in the 
scope object.  Similarly, if we change the value of the corresponding variable 
in the scope object, Angular will automatically update the value of the DOM 
element.

The next step is to add a button:

<input type="button" value="Get Item" ng-click="getItem()"/>

As you can see, in the above code, the ng-click attribute reference the getItem 
function which we added to the scope object.

The HTML for what we have so far:

<body ng-controller="MainController">
  <input type="text" ng-model="itemIndex"/>
  <input type="button" value="Get Item" ng-click="getItem()"/>
  <p>Current Item: {{currentItem}}</p>
</body>

So far, we allowed the user to change the value for itemIndex, and after doing 
that, the user have to click on the "Get Item" button so that the getItem 
function update the value of the currentItem variable in the scope object, and 
therefore update the UI.  I wonder if there is a way to update the currentItem 
variable whenever the user change the itemIndex variable.  As it turns out, 
if we want to get rid of the "Get Item" button, we can change paragraph that 
displays the currentItem to:

<p>Current Item: {{getItem()}}</p>

This may work.  I need to try this out.
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License