How to slice a string in AngularJS ? - GeeksforGeeks

14 Oct, 2020
Given a string and the task is to make a slice of given string using AngularJS.
Approach 1 Using 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:
<!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>    <p>        How to slice a string in AngularJS    </p>    <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:
<!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>    <p>        How to slice a string in AngularJS    </p>    <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:
<!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>    <p>        How to slice a string        using substr() method in AngularJS    </p>    <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:
<!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>    <p>        How to slice a string using        substr() method in AngularJS    </p>    <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:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
AngularJS-Misc
HTML-Misc
AngularJS
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Auth Guards in Angular 9/10/11
How to bundle an Angular app for production?
What is AOT and JIT Compiler in Angular ?
Angular PrimeNG Dropdown Component
How to set focus on input field automatically on page load in AngularJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to set the default value for an HTML <select> element ?
How to update Node.js and NPM to next version ?
How to set input type date in dd-mm-yyyy format using HTML ?