Question

我还在学习JS / Angular，所以请轻松一下：）

我正在尝试为某些数据创建一个limitTo过滤器。这是一系列以空格分隔的内容，例如：$scope.data = 'foo bar data new code';

我希望用户能够将此限制为一定数量的单词。让我们说他们选择“2”，他们输入“2”，输出将是“foo bar”。

<body ng-controller="MainCtrl">
<input ng-model="quantity">
<p>{{name| spaced:quantity}}</p>
</body>

间隔过滤器因此会按空格分割，并且只打印用户输入的所需数量的单词，或数量。

我知道我需要为间距创建一个过滤器，但是如何开始却迷失了。这是迄今为止的尝试：https://jsfiddle.net/nick_1002/fk2qvmrs/3/

非常感谢！

Answer 1

首先，您需要在过滤器中返回一个函数。

该函数需要返回已过滤的输出。

该函数会将字符串拆分为单词数组，然后将数组的大小减小为字数限制大小，并加入数组以返回新字符串，如果未设置限制则返回原始字符

angular.module('filters', []).
filter('spaced', function() {
  // return the function that does the filtering
  return function(str, limit) {
    if (limit) {
      return str.split(' ').splice(0, limit).join(' ');
    } else {
      // if limit not set or is zero return original string
      return str;
    }
  }
});

的 DEMO

Answer 2

HTML：

<body ng-app="myApp">
<div ng-controller="MainCtrl">

    <input type="number" ng-model="spaceLimit" />
    <h2>{{data | spaceFilter:" ": spaceLimit}}</h2>

</div>
</body>

JavaScript的：

var app = angular.module('myApp', []);

app.controller('MainCtrl', function($scope) {
  $scope.data = 'foo bar data new code';
  $scope.spaceLimit = 3;

});


app.filter('spaceFilter', function() {
  return function(str,filterOn,limit) {
    if (limit) {
      return str.substring(0, str.split(filterOn, limit).join(filterOn).length);
    } else {
      return str;
    }
  }
});

Angular：过滤以按空格限制单词

2 个答案: