自定义过滤器我们可以使用filter函数自定义一个过滤器，filter函数的第一个参数是过滤器到时候再DOM中要使用的名字，第二个

自定义过滤器，根据输入的关键词，全文搜索，如果有对应的结果那就让它变成红色背景 <div class="snippet-clipboard-content notr

过滤器 about angular-tutorial HOT 2 OPEN

wscats commented on June 11, 2024

过滤器

from angular-tutorial.

Comments (2)

Wscats commented on June 11, 2024

自定义过滤器，根据输入的关键词，全文搜索，如果有对应的结果那就让它变成红色背景

<!DOCTYPE html>
<html ng-app="wsscat">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script src="angular.js"></script>

    <body ng-controller="filterCtrl">
        <input ng-model="red" ng-keyup="makeRed()" />
        <div ng-bind-html="htmlSced"></div>
    </body>
    <script>
        var app = angular.module('wsscat', []);
        app.controller('filterCtrl', function($scope, $filter, $sce) {
            var html = "<p>123</p>";
            //刚进入时候显示的DOM结构
            $scope.htmlSced = $sce.trustAsHtml(html)
            $scope.makeRed = function() {
                $scope.html = $filter("wsscat")(html, $scope.red);
                $scope.htmlSced = $sce.trustAsHtml($scope.html);
                //如果没有任何输入就变成原来的DOM结构
                if(!$scope.htmlSced) {
                    $scope.htmlSced = $sce.trustAsHtml(html)
                }
            }
        })
        app.filter("wsscat", function() {
            var func = function(input, val) {
                //判断筛选结果是否为空
                if(val) {
                    var output;
                    //把字符串<p>123</p>根据1的位置，拆分成["<p>", "23</p>"]
                    str = input.split(val);
                    //把1添加红色的背景色
                    var addRed = '<span style="background-color:red">' + val + '</span>';
                    //将1插回DOM中，生成一个新的DOM结构
                    output = str.join(addRed)
                    return output;
                }
            }
            return func;
        })
    </script>
</html>

from angular-tutorial.

Wscats commented on June 11, 2024

AngularJS权威教程第7章过滤器filters

from angular-tutorial.

Recommend Projects