Question

我正在实现一个过滤器标记，它可以为分隔符设置一个可选参数。

默认情况下，过滤器会生成给定输入的各个字符的逗号分隔字符串。如果提供了分隔符，则输入字符串中的各个字符将由指定的分隔符分隔。

未提供令牌:( tokenize解析为逗号）：

{{"hello world"|tokenize}}

结果：

h,e,l,l,o,,w,o,r,l,d

令牌提供：

{{"hello world"|tokenize:'#'}}

结果：

h#e#l#l#o##w#o#r#l#d.

问题是我无法传递可选参数并接收它以基于可选分隔符分隔字符串。

html代码：

<!doctype html>
<html ng-app="myApp">
   <head>
      <script src="angular.js"></script>
      <script src="filter.js"></script>
   </head>
   <body>
      <div ng-controller='HelloController'>
         <label>Input</label><input ng-model='greeting'><br><br>
         <label>Delimeter</label><input ng-model='delimeter'><br>
         <p>{{greeting | tokenize}}(default)</p>
         <p>{{greeting| tokenize:arg1}}(with Option)</p>
      </div>
   </body>
</html>

我的filter.js代码是：

angular.module('myApp', [])
    .controller('HelloController', function($scope) {
        $scope.greeting = "Angular is Awesome";
        //$scope.delimeter="#";
    })
    .filter('tokenize', function() {
        return function(value) {
            if (angular.isString(value)) {
                var abc = [];
                abc = value.split('');
                value = abc.join();
                return value;
            } else {
                return value;
            }
        };    
    });

Answer 1

只需在过滤器函数中声明另一个参数：

<p>{{"Angular is Awesome" | tokenize:'arg1'}}(with Option)</p>
                                     ^ Dont forget quotes if it isn't a variable


.filter('tokenize', function () {
    return function (value, optionalArg) {
        console.log(value); // Angular is Awesome
        console.log(optionalArg); // arg1

        if (angular.isString(value)) {
            var abc = [];
            abc = value.split('');
            value = abc.join(optionalArg); //pass the separator to join
            return value;
        } else {
            return value;
        }

https://docs.angularjs.org/guide/filter

使用过滤方法angular

1 个答案: