How to slice a string in AngularJS ?
Given a string and the task is to make a slice of the given string using AngularJS. This task can be performed in 2 ways by using the built-in methods in AngularJS, i.e., we can use the slice() method, which is used to return a part or slice of the given input string. The substr() method can also be used to slice a string that returns the specified number of characters from the specified index from the given string
Approach 1: Using the slice() method: The approach is to use the slice() method which accepts 2 parameters start and end. In the first example, only 1 parameter is used and in the second example, 2 parameters are used.
Example 1: This example illustrates the slicing of the string using the slice() method by passing the single parameter value.
HTML
<!DOCTYPE HTML><html> <head> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"> </script> <script> var myApp = angular.module("app", []); myApp.controller("controller", function($scope) { $scope.str = "This is GeeksforGeeks"; $scope.res = ''; $scope.sliceStr = function() { $scope.res = $scope.str.slice(8); } }); </script></head> <body style="text-align:center;"> <h1 style="color:green;"> GeeksforGeeks </h1> <h3> How to slice a string in AngularJS </h3> <div ng-app="app"> <div ng-controller="controller"> String - '{{str}}' <br><br> <button type="button" ng-click="sliceStr()"> Click Me </button> <p>Result = '{{res}}'</p> </div> </div></body></html> |
Output:
Example 2: This example illustrates the slicing of the string using the slice() method by passing the 2 parameter values.
HTML
<!DOCTYPE HTML><html> <head> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"> </script> <script> var myApp = angular.module("app", []); myApp.controller("controller", function($scope) { $scope.str = "A Computer Science portal"; $scope.res = ''; $scope.sliceStr = function() { $scope.res = $scope.str.slice(2, 18); } }); </script></head> <body style="text-align:center;"> <h1 style="color:green;"> GeeksforGeeks </h1> <h3> How to slice a string in AngularJS </h3> <div ng-app="app"> <div ng-controller="controller"> String - '{{str}}' <br><br> <button type="button" ng-click="sliceStr()"> Click Me </button> <p>Result = '{{res}}'</p> </div> </div></body></html> |
Output:
Approach 2 Using substr() method: The approach is to use the substr() method. It takes 2 parameters, one is the start and another is length(optional). In the first example, only one parameter is used. And in the second example, both parameters are used.
Example 1: This example illustrates the slicing of the string using the substr() method by specifying the single parameter value.
HTML
<!DOCTYPE HTML><html> <head> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"> </script> <script> var myApp = angular.module("app", []); myApp.controller("controller", function($scope) { $scope.str = "This is GeeksforGeeks"; $scope.res = ''; $scope.subStr = function() { $scope.res = $scope.str.substr(8); } }); </script></head> <body style="text-align:center;"> <h1 style="color:green;"> GeeksforGeeks </h1> <h3> How to slice a string using substr() method in AngularJS </h3> <div ng-app="app"> <div ng-controller="controller"> String - '{{str}}' <br><br> <button type="button" ng-click="subStr()"> Click Me </button> <p>Result = '{{res}}'</p> </div> </div></body></html> |
Output:
Example 2: This example illustrates the slicing of the string using the substr() method by specifying 2 parameter values.
HTML
<!DOCTYPE HTML><html> <head> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"> </script> <script> var myApp = angular.module("app", []); myApp.controller("controller", function($scope) { $scope.str = "A Computer Science portal"; $scope.res = ''; $scope.subStr = function() { $scope.res = $scope.str.substr(2, 16); } }); </script></head> <body style="text-align:center;"> <h1 style="color:green;"> GeeksforGeeks </h1> <h3> How to slice a string using substr() method in AngularJS </h3> <div ng-app="app"> <div ng-controller="controller"> String - '{{str}}' <br><br> <button type="button" ng-click="subStr()"> Click Me </button> <p>Result = '{{res}}'</p> </div> </div></body></html> |
Output:
Please Login to comment...