如何制作自定义 Angular 过滤器

Question

嗨，我是 Angualr JS 的新手，我想过滤每个返回的推特文本，如果它包含一个带有主题标签的词，然后将该词设为 link.

例如

返回的 Twitter 文本是 "The quick brown #fox jumps over the lazy #dog" 然后将返回的文本设为 》快棕<a href="page.link">#fox</a>越懒<a href="page.link">#dog</a>

HTML代码

<ul class="list-unstyled">
    <li ng-repeat="tweet in tweets" class="striped">
        <p ng-bind-html="tweet.text | filter:hashtag"></p>
    </li>
</ul>

JS代码

app.filter('hashtag', function(){


});

Answer 1

首先，要使用 filter 你应该只这样调用：

<p ng-bind-html="tweet.text | hashtag"></p>

然后，要使您的过滤器正常工作，您可以这样做：

(function() {
  "use strict";

  angular
    .module('app', ['ngSanitize'])
    .controller('MainCtrl', MainCtrl)
    .filter('hashtag', hashtag);

  MainCtrl.$inject = ['$scope'];

  function MainCtrl($scope) {
    $scope.tweets = [];

    for (var i = 0; i < 10; i++) {
      $scope.tweets.push({
        "text": "A text with hashtag #ex " + i + " another #ex " + (i + 1)
      })
    }
  }

  function hashtag() {
    return function(input) {
      if (!input) return;

      var regex = new RegExp('(#[^ ]*)', 'g');
      var matches = [];
      var match;
      while (match = regex.exec(input)) {
        matches.push(match[0]);
      }

      matches.forEach(function(match) {
        input = input.replace(new RegExp('(' + match + ')', 'g'), '<a href="page.link"></a>')
      });

      return input;
    };
  }
})();

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-sanitize.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" />
</head>

<body ng-controller="MainCtrl">
  <ul class="list-unstyled">
    <li ng-repeat="tweet in tweets" class="striped">
      <p ng-bind-html="tweet.text | hashtag"></p>
    </li>
  </ul>
</body>

</html>

如何制作自定义 Angular 过滤器

How to make custom Angular filter

javascript

frontend

angularjs

angularjs-directive

angular-filters