angular查询（回车）

最新推荐文章于 2021-05-21 15:50:58 发布

PremierAmour

最新推荐文章于 2021-05-21 15:50:58 发布

阅读量724

点赞数

CC 4.0 BY-SA版权

文章标签： angular

本文链接：https://blog.youkuaiyun.com/PremierAmour/article/details/78859806

本文详细探讨了在Angular应用中如何高效地进行数据查询，包括使用Angular内置的搜索过滤功能，以及结合RxJS操作符进行实时查询的方法。通过实例解析，帮助开发者掌握在用户输入回车时触发查询操作的实现策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里写图片描述

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="js/angular.min.js"></script>
    </head>

    <body ng-app="app" ng-controller="ct">
        <input type="text" placeholder="查询内容" ng-keydown="cha($event)" ng-model="name" />
        <select ng-change="chan()" ng-model="pic" ng-init="pic=gs[0]">
            <option ng-repeat="g in gs">{{g}}</option>
        </select>
        <table>
            <tr>
                <td><input type="checkbox" ng-click="sel()" ng-model="selet" /></td>
                <td>数量</td>
                <td>价格</td>
                <td>总价</td>
                <td>操作</td>
            </tr>
            <tr ng-repeat="x in xs ">
                <td>
                    <input type="checkbox" ng-checked="xu" />
                </td>
                <td>
                    {{x.num}}
                </td>
                <td>
                    {{x.pic}}
                </td>
                <td>
                    {{x.pic*x.num}}
                </td>
                <td>
                    <input type="button" value="删除" ng-click="del($index)" />
                </td>
            </tr>
        </table>
        <div ng-show="d">
            数量<input type="text" /><br /> 价格
            <input type="text" /><br />
            <input type="button" value="确认" />
        </div>
        <script type="text/javascript">
            var mo = angular.module("app", []);
            mo.controller("ct", function($scope) {
                $scope.xs = [{
                    "num": 88,
                    "pic": "2",
                    "flag": false
                }, {
                    "num": 75,
                    "pic": "5",
                    "flag": false
                }, {
                    "num": 52,
                    "pic": "6",
                    "flag": false
                }, {
                    "num": 66,
                    "pic": "8",
                    "flag": false
                }];
                $scope.gs = ["便宜", "贵"];

                $scope.del = function($index) {
                        $scope.xs.splice($index, 1);
                    }
                    /**
                     * 全选全不选
                     * */
                $scope.sel = function() {
                        for (var i = $scope.xs.length - 1; i >= 0; i--) {
                            $scope.xs[i].flag = $scope.selet;
                        }
                        $scope.xu = $scope.selet;
                    }
                    /**
                     * 查询
                     */
                $scope.cha = function($event) {

                        $scope.xs = [{
                            "num": 88,
                            "pic": "2",
                            "flag": false
                        }, {
                            "num": 75,
                            "pic": "5",
                            "flag": false
                        }, {
                            "num": 52,
                            "pic": "6",
                            "flag": false
                        }, {
                            "num": 66,
                            "pic": "8",
                            "flag": false
                        }];

                        var key = $event.keyCode;
                        var aa = [];
                        var name = $scope.name;

                        if (key == 13) {

                            for (var i = 0; i < $scope.xs.length; i++) {

                                if ($scope.xs[i].pic.indexOf(name) != -1) {
                                    //if ($scope.xs[i].pic.indexOf(name) != -1) {判断文字 indexOf(包含)
                                    //if ($scope.xs[i].pic==name) {判断int类型
                                    aa.push($scope.xs[i]);

                                }
                            }
                            $scope.xs = aa;
                        }
                    }
                    /**
                     * 排序 
                     * */
                $scope.chan = function() {
                        var a1 = $scope.pic;
                        if (a1 == "便宜") {
                            $scope.xs.sort(function(a, b) {
                                return a.pic - b.pic;
                            })
                        } else {
                            $scope.xs.sort(function(a, b) {
                                return b.pic - a.pic;
                            })
                        }
                    }

            });
        </script>
    </body>

</html>