Question

我理解数据绑定在这个简单的例子中是如何工作的，但是我很好奇你如何限制输出只显示你输入的任何数字的最后4个字符，而不是整个数字：

<!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>

你会怎么做呢？

Answer 1

来自你可以做的AngularJS limitTo文档：

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

或者查看此plunkr了解更多选项。

Answer 2

    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>

Answer 3

你可以这样做。

<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>

请参阅此更多信息limitTo

或者您可以将自定义filer放入模板中

编辑代码：

对于角度1.0.7， limitTo 过滤器仅适用于数组。根据您的要求，您需要实现自定义过滤器。有关详情，请查看here。

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>

以下是plunker

在angularjs中绑定数据时显示最后几个字符

3 个答案: