AngularJs自定义过滤器在我的情况下不起作用

时间:2016-07-27 03:22:56

标签: javascript angularjs angular

<p ng-repeat="name in names">{{name | cancatSpace}} </p>

app.filter('cancatSpace', function () {
  return function (input) {
      return input.replace(/\s+/g, '');
  };
});

使用上面的代码,如果我的名字是'hello world',它应该变为helloworld,但它不会。我没有看到任何错误。我错过了什么?我尝试在我的过滤器中执行console.log(input)它没有控制任何东西?

2 个答案:

答案 0 :(得分:1)

无论你在这里发布的代码是好的。如果出现问题则会出现一些小错误。请查看您的控制台并搜索控制台上是否有任何错误。

我已发布确切的代码及其正常工作。您可以运行并测试它。但是,如果您希望我们对其进行调试,请发布完整的代码。

&#13;
&#13;
var myApp = angular.module("myApp", []);

myApp.controller("myCtrl", ['$scope', function($scope) {
  $scope.names = ["john doe", "john doe2", "john doe 3", "john doe  5"];
}]);


myApp
        .filter('cancatSpace', function () {
            return function (input) {
              return input.replace(/\s+/g, '');
            };
        });
        
&#13;
<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-controller="myCtrl">
    <p ng-repeat="name in names">{{name | cancatSpace}}</p>
  </body>

</html>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

尝试使用以下内容,它将连接您在文本字段中传递的任何文本。

<div data-ng-app="app" data-ng-controller="mycontroller">
  <input type="text" data-ng-model="greeting" /><br />
  Concated text : {{greeting|concat}}
</div>

<script type="text/javascript">
        var mainApp = angular.module('app', []);

        mainApp.controller('mycontroller', ['$scope', 'concatFilter', function ($scope, concatFilter) {
            $scope.greeting = 'hello hello';
            $scope.concatFilter = concatFilter($scope.greeting);
        }]);

        mainApp.filter('concat', function () {
            return function (input) {
                return input.replace(/\s/g, '');
            };
        });

    </script> 

有关过滤器的更多信息,请参阅此处的文档.. https://docs.angularjs.org/guide/filter