AngularJS: check selected option in dropdown

http://angularjs.org/

by Yashwanth M

HTML

<div ng-app="myApp" ng-controller="myCtrl">
    First Name: <input ng-model="fnameModel"/><br>
    Last Name : <input ng-model="lnameModel"/><br>
   
   <div>
        <p>You can use double braces to display content from the data model.<b>View Content Repalce : {{fnameModel}}</b></p>

        <p>Use the ng-bind directive to bind the innerHTML of an element to a property in the data model.<b ng-bind="lnameModel">View innerHTML Replace : {{lnameModel}}</b></p>
    </div>
    
   <h1>watch : {{counter}}</h1>
   <h4>This function is used to observe changes in a variable on the $scope.
   
   <ul><pre>$watch(watchExpression, listener, [objectEquality])</pre>
<li>Here, watchExpression is the expression in the scope to watch. This expression is called on every $digest() and returns the value that is being watched.</li>
<li>The listener defines a function that is called when the value of the watchExpression changes to a new value. If the watchExpression is not changed then listener will not be called.</li>
<li>The objectEquality is a boolean type which is used for comparing the objects for equality using angular.equals instead of comparing for reference equality.</li></ul>
   </h4>
   <div>
   <input type="text" ng-model="addName" value=""/>&nbsp;&nbsp;&nbsp;
   <INPUT TYPE="button" NAME="button" Value="Push Object Name" 
   data-ng-click="addFieldName()"/><br/>
    
    <input type="text" ng-model="addValue" value="{{shelf[1].value}}" />&nbsp;&nbsp;&nbsp;
   <INPUT TYPE="button" NAME="button" Value="Push Object Value" 
   data-ng-click="addFieldValue()"/>
   
   </div><br/>
   
   <div>
        Fruit List:
        <select
            ng-model="cart.fruit"
            ng-options="state as state.name for state in shelf"></select>
            <br/>
        <tt>Cost & Fruit selected: {{cart.fruit}}</tt>
        
        <br/>
        <h1>WatchCollection : {{dataCount}}</h1>
        <h4>This function is used to watch the properties of an object and fires whenever any of the...

JavaScript

var app = angular.module('myApp', []);
	app.controller('myCtrl', function($scope) {
		$scope.fnameModel = "Yash";
		$scope.lnameModel = "M";
        $scope.counter = 0;
 
$scope.$watch('fnameModel', function (newVal, oldVal) {
console.log('$watch « newVal:',newVal,'\t oldVal:',oldVal);
 $scope.counter = $scope.counter + 1;
});

$scope.names = ['A', 'B', 'C', 'D'];
$scope.dataCount = 4;
 
$scope.$watchCollection('shelf', function (newVal, oldVal) {
console.log('$watchCollection « newVal:',newVal,'\t oldVal:',oldVal);
 $scope.dataCount = newVal.length;
});

$scope.cart = {
   'fruit': {'name': '','value':''},
};
  
    
     $scope.shelf = [
        {'name': 'Banana','value':'$2'},
        {'name': 'Apple','value':'$8'},
        {'name': 'Pineapple','value':'$5'},
        {'name': 'Blueberry','value':'$3'}
    ];
    
$scope.addFieldName = function() {
    var obj = {'name': $scope.addName, 'value': '$'};
	$scope.shelf.push(obj);
};
$scope.addFieldValue = function() {
    
	$scope.shelf[1].value = $scope.addValue;
};

});