内容隐藏

在本教程中，我们将看到如何使用AngularJS自定义过滤器创建实时搜索。我们将创建一个自定义过滤器来实现此目的，而不是Angular提供的默认搜索。

查看有关如何使用AngularJS自定义过滤器创建实时搜索的演示。

过滤器？

过滤器用于更改修改数据，并且可以使用管道字符合并到表达式或指令中。以下是常用过滤器的列表。

序号	名称	描述
1	大写	将文本转换为大写文本。
2	小写	将文本转换为小写文本。
3	货币	以货币格式设置文本格式。
4	过滤	根据提供的条件将数组过滤为数组的子集。
5	订购	根据提供的条件对数组排序。

实作

要创建实时搜索，我们将使用 AngularJS.
让我们从实现依赖关系开始。
现在将所需的库包含到我们的 index.html

index.html


<html>

<head>
    <title>Real Time Search With AngularJS 自定义过滤器</title>
</head>

<body>
    <h1>Real Time Search With AngularJS 自定义过滤器</h1>
    <!-- OUR APP GOES 这里 -->
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    <script src="app.js"></script>
</body>

</html>

在这里您可以看到我们已经在页面底部加载了我们的库，即 Angular.min.js，以及我们的主应用程序文件 app.js.

重击


$ npm install angular --save // AngularJS

JSON数据

要创建实时搜索，我们必须创建一个JSON数据，Angular将从该数据中过滤结果。因此，让我们开始创建JSON数据。

JSON格式数据


{
            "name": "burger 1",
            "type": "non-veg",
            "price": 120
        },
        {
            "name": "burger 2",
            "type": "veg",
            "price": 50
        },
        {
            "name": "coke 1",
            "type": "veg",
            "price": 40
        },
        {
            "name": "coke 2",
            "type": "veg",
            "price": 35
        },
        {
             // Additional JSON数据
         }

角度应用

现在，让我们创建一个角度应用程序，从中过滤数据。创建一个 app.js 我们在声明中声明的文件 index.html 文件。

app.js


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

foods.controller('foodsListCtrl', function($scope) {
  
  $scope.foods = [
            {
              "name": "burger 1",
              "type": "non-veg",
              "price": 120
            },

            {
              "name": "burger 2",
              "type": "veg",
              "price": 50
            },

            { 
              // addtitional json  data
            }
    ];
  
    $scope.orderList = "name";
});

自定义过滤器

现在，将设计我们的 index.html 页面，其中将包含输入文本字段和我们的JSON数据列表。

index.html


<body>
    <h1>Real Time Search With AngularJS 自定义过滤器</h1>
    <div id="foods" ng-app="foods" ng-controller="foodsListCtrl">
        <p>`Menu</p>
        <input type="text" id="query" ng-model="query" />
        <select ng-model="orderList">
           <option value="name">By name</option>
           <option value="price">Expensive</option>
           <option value="-price">Expensive</option>
        </select>
        <ul id="food_ul">
            <li ng-repeat="food in foods | 过滤:query | orderBy: orderList">
                name: {{food.name}}<br/><br/> type: {{food.type}}<br/>
                <div class="right top">RS : {{food.price}}</div>
            </li>
        </ul>
        <span>Number of foods: {{foods.length}}</span>
    </div>
</body>

在这里，您可以看到我们已经为列表定义了一个过滤器，并且该列表绑定了ID为“ query”的查询，在其中它将检查所选选项，并以此方式显示该列表。

查看代码段和演示这里!

实时搜索演示

获得更多角度这里！

使用AngularJS自定义过滤器进行实时搜索

过滤器？

实作

JSON数据

角度应用

自定义过滤器

有关