AngularJS $parse Service

The AngularJS $parse service is used to convert AngularJS expression into a function. The $parse takes AngularJS expression as parameter and convert into a function.

Syntax

var getter = $parse('name');
var setter = getter.assign;

AngularJS $parse Service Example

<!DOCTYPE html>      
<html>      
<head> <!-- www.techstrikers.com -->      
 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.1/angular.min.js"></script>       
    <meta charset="utf-8">      
    <title>AngularJS $parse Example</title>      
  <script>      
var app = angular.module('app', []);      
    app.controller("ParseController", function($scope, $parse) {
      
       var webSite = {
        Url: "www.techstrikers.com",
        Tutorial: "AngularJS"
      };
      
      //This is appraoch 1 :using assign method.
      var getUrl = $parse('Url'),
        setUrl = getUrl.assign;

      $scope.parseAgain = function() {
        $scope.urlName = setUrl($scope, $scope.inUrl);
      };

      
      //This is appraoch 2 :using getter method
      var getTutorial = $parse('Tutorial');

      $scope.tutorialName = getTutorial(webSite);

      $scope.parseOtherWay = function() {
        $scope.tutorialName = getTutorial({
          Tutorial: $scope.inTutorial
        });
      };
      
    });   
</script>      
</head>      
<body style="background-color:#DDE4E9;">      
  <fieldset style="background-color:#DDE4E9;">                  
    <legend>AngulerJS $parse Service Example</legend>       
  <div ng-app="app">            
    <div ng-controller="ParseController">       
      <input type="text" ng-model="inUrl" ng-change="parseAgain()" placeholder="Enter some string">
<p style="font-family:Arial;color:yellow;background:steelblue;padding:3px;width:350px;"  
     >{{urlName}}</p> 
            
  <input type="text" ng-model="inTutorial" ng-change="parseOtherWay()" placeholder="Enter some string">        
     <p style="font-family:Arial;color:yellow;background:steelblue;padding:3px;width:350px;"  
     >{{tutorialName}}</p> 
    </div>            
</div>      
 </fieldset>       
</body>      
</html>

See Live Example

« Previous