Show last few characters when data binding in angularjs

Question

I understand how data binding works in this simple example, however I'm curious on how you could limit the output to display only the last 4 characters of whatever number you put in, instead of the entire number:

<!doctype html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
  </head>
  <body>
    <div>
      <label>Name:</label>
      <input type="text" ng-model="number" placeholder="Enter a long number here">
      <hr>
      <h1>Hello {{number}}!</h1>
    </div>
  </body>
</html>

How would you go about doing this?

stackoverflow.com/a/9795028/3556874

Naeem Shaikh
– Naeem Shaikh

2015-07-08 11:43:20 +00:00
Commented Jul 8, 2015 at 11:43 — Naeem Shaikh
– Naeem Shaikh, Commented Jul 8, 2015 at 11:43

Jax · Accepted Answer · 2015-07-08 11:46:12Z

5

from the AngularJS limitTo docs you could do:

<h1>Hello {{number | limitTo: -4}}!</h1>

Or see this plunkr for more options.

answered Jul 8, 2015 at 11:46

Jax

1,8373 gold badges18 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pankaj Ladhar · Accepted Answer · 2015-07-08 11:48:18Z

0

    For that you have to write a Custom filter

    **This is the Example:-**

    'use strict';
    var toDoAppFilters = angular.module('toDoAppFilters',[]) ;

    toDoAppFilters.filter('truncate', function() {
        return function(input,length) {
            return (input.length > length ? input.substring(0, length) : input );
        };
    });
  And call like this 
<h1>Hello {{number | truncate:20}}!</h1>

answered Jul 8, 2015 at 11:48

Pankaj Ladhar

1556 bronze badges

Comments

RIYAJ KHAN · Accepted Answer · 2015-07-09 04:53:45Z

you can do it in this way.

<div>
      <label>Name:</label>
      <input type="text" ng-model="number" placeholder="Enter a long number here">
      <hr>
      <h1>Hello {{number |limitTo : -4: number.length}}!</h1>
    </div>

Please refer this more info limitTo

or you can put custom filer in template

EDIT CODE :

With angular 1.0.7, the limitTo filter is work with only Array. For your requirement,you need to implement custom filter. Please check it here for more details.

JS :

angular.module("test",[])
.controller("testCtrl", function ($scope) { 
        $scope.number = ""; 

}).filter("limitToCustom",function(){

    return function(actualData,number){
        console.log(number)
        var arrData = actualData.split("");
        return  actualData.slice(-number);

    }
});

HTML :

<div  ng-controller="testCtrl" class="container">

    <div>
      <label>Name:</label>
      <input type="text" ng-model="number"  placeholder="Enter a long number here">
      <hr>{{number}}
      <h1>Hello {{number |limitToCustom : 4 }}!</h1>
    </div>

</div>

Here is the plunker

I've gone ahead and used {{number |limitTo : -4 : number.length}} however it's still not working and only displaying the full number.. is there something I am missing?

Collectives™ on Stack Overflow

Show last few characters when data binding in angularjs

3 Answers 3

Comments

Comments

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

4 Comments

Linked

Related