zoukankan      html  css  js  c++  java
  • 用angular做的模糊搜索

    今天大家来试一试用angular做一下简单的搜索功能吧;

    首先我们需要写html的部分,我们需要设置几个条件,比如按什么来排序,按升序还是降序搜索,和一个文本框来设置模糊搜索;

    <nav>

      <select ng-model="a">

        <option value="num">按编号排序</option>

        <option value="name">按姓名排序</option>

        <option value="age">按年龄排序</option>

      </select>

      <select ng-model="b">

        <option value="">升序</option>

        <option value="">降序</option>

      </select>

      <input type="text" ng-model="s"/>

    </nav>

    设置上ng-model好在接下来用angular来获取动态的值,方便我们搜索,接下来我们先写js的部分吧;

    首先我们需要先引入一个angular,在js中创建angular的模块部分和控制台。之后我们创建一个json文件来保存一下我们需要查询的数据,之后我们在控制台中获取一下这个json文件中的数据内容,方便我们导入到html中来搜索。

    {

      "xinxi":[

        {"num":100,"name":"baobo","age":12},

        {"num":99,"name":"paopo","age":18},

        {"num":50,"name":"xinxin","age":55},

        {"num":55,"name":"angular","age":20},

        {"num":75,"name":"chali","age":15},

        {"num":85,"name":"each","age":60},

        {"num":98,"name":"hello","age":19},  

        {"num":68,"name":"zizizi","age":28},

        {"num":66,"name":"gegege","age":56},

        {"num":77,"name":"fufuf","age":43},

        {"num":42,"name":"baobo","age":12},

        {"num":54,"name":"menmen","age":32},

        {"num":88,"name":"qqqq","age":71},

        {"num":69,"name":"laowang","age":22},

        {"num":53,"name":"wangwang","age":99},

        {"num":1,"name":"dadad","age":88}

      ]

    }

    这是我所创建的json文件。

    var app=angular.module("mk",[]);

    app.controller("text",function($scope,$http){

      $http.get("paixu.json").success(function(data){

        $scope.data=data.xinxi

        $scope.a="num"

      })

    });

    这是我所创建用来获取json文件的代码;

    注意$scope.a = “num”;是为了和上面获取的动态数据相对应的,并且是让数据先按什么先排序。

    之后我们只需要把这些数据填到html部分就可以了。

    <table border="0px" id="table">

      <tr>

        <th>编号</th>

        <th>姓名</th>

        <th>年龄</th>

      </tr>

      <tr ng-repeat="value in data | orderBy:b+a | filter:s">

        <td>{{value.num}}</td>

        <td>{{value.name}}</td>

        <td>{{value.age}}</td>

      </tr>

    </table>

    ng-repeat="value in data | orderBy:b+a | filter:s;这是充分运用了angular中的过滤器属性,orderBy是排序问题,注意一定要先把升序和降序的动态数据放到前面防止出错,filter这个过滤器就是把我们所搜索的数据和我们的json数据库中作比较,json中哪一下标的数组中有我们搜索的数据就显示出来,没有则隐藏。

  • 相关阅读:
    Java实现 蓝桥杯VIP 算法训练 装箱问题
    Java实现 蓝桥杯VIP 算法训练 入学考试
    Qt4.6.2已编译二进制版本在VS2005中的问题
    函数可重入问题reentrant functions(函数执行过程中可以被中断,允许多个副本)
    QT的Paint 系统
    取clientdataset detal中的 更新数据, 将detal 转 数据库脚本sql
    delphi 八字排盘源码(post数据以后,又分析数据)
    Working with Entity Relations in OData
    图片轮播插件Nivo Slider
    跨域访问 REST API
  • 原文地址:https://www.cnblogs.com/Z-Xin/p/7029255.html
Copyright © 2011-2022 走看看