How to slice a string in AngularJS ?
Last Updated :
04 Aug, 2022
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:
Similar Reads
How to limit the length of a string in AngularJS ? Validation of fields is an important process while developing a dynamic web application. In various aspects of security, the validation is quite important. Along with this, the restriction of the limit to the length of a string is also an important process that helps to include the constraint for th
5 min read
How to replace a string by another string in AngularJS ? In this article, we will see how to select a string from the text and replace it with another string using AngularJS and will understand it through the illustrations. The replace() method can be used to search the particular character(s), which is getting replaced with a specific character(s) &
2 min read
How to convert string into a number using AngularJS ? In this article, we will see how to convert a string into a number in AngularJS, along with understanding its implementation through the illustrations. Approach: The parseInt() method is used for converting the string to an integer. We will check whether the string is an integer or not by the isNumb
2 min read
How to concat strings using AngularJS ? In this article, we will see how to concat strings in AngularJS. There are few ways to concat the strings in AngularJS. In this article, we will see 2 of them.Example 1: In the first example, we are using the '+' operator to concat the strings HTML<!DOCTYPE HTML> <html> <head> <
2 min read
How to iterate over Object in Angular ? Objects consist of a set of key-value pairs, which are known as Properties. All Properties are named in JavaScript objects and the key part represents the Property name, while the value part represents the property Value. Each element(key-value pair) of the object can be utilized to perform a specif
3 min read
How to count array items in AngularJS ? Given an array and the task is to get the length of an array variable in AngularJS. For this, we will be using the .length() method to get the length of an array variable. Syntax: array.length();Example 1: In this example, the array length is shown by the alert box. Here, we have an array containing
2 min read