Bootstrap + AngularJS 实现简单的数据过滤字符查找功能

具体代码如下所示：

find.html

<!DOCTYPE html> 
<html ng-app="find"> 
<head> 
<title>字符查找</title> 
<meta charset="utf-8"/>  
<script src="../Script/angular.min.js" type="text/javascript"></script> 
<link rel="stylesheet" href="../bootstrap-3.0.0/css/bootstrap.css" rel="external nofollow" > 
<style type="text/css"> 
 body{ 
    font-size: 12px; 
 } 
 ul{ 
  list-style-type: none; 
  width: 408px; 
  margin:0px; 
  padding: 0px; 
 } 
 ul li { 
     float: left; 
     padding: 5px 0px; 
 } 
 ul .bold { 
      font-weight: bold; 
      cursor: pointer; 
 } 
 ul li span { 
       width: 70px; 
       float: left; 
       padding: 0px 10px; 
 } 
 ul .focus { 
       background-color: #cccccc; 
 } 
</style> 
<script type="text/javascript"> 
    var find = angular.module('find', []); 
    find.controller('find_name', ['$scope', function ($scope) { 
      $scope.bold = "bold"; 
      $scope.key = ''; 
      $scope.data = [ 
      { name: "张小琴", sex: "女", age: 24, score: 95 }, 
      { name: "李清思", sex: "女", age: 27, score: 87 }, 
      { name: "杨旭旭", sex: "男", age: 28, score: 86 }, 
      { name: "陈楚圣", sex: "男", age: 23, score: 97 } 
      ]; 
    }]) 
 </script> 
</head> 
<body> 
  <div ng-controller="find_name" align="center"> 
   <div class="panel panel-primary" align="center" style="height: 300px"> 
     <div class="panel-heading" align="center"> 
      <div class="panel-title" style="font-size: 22px">字符查找</div> 
     </div> 
    <div> 
      <input id="txtkey" type="text" ng-model="key"  
       style="margin-top: 10px; height: 30px;width: 200px;" placeholder="请输入姓名关键字" /> 
    </div> 
    <ul> 
      <li ng-class="{{bold}}" style="font-size: 16px; margin-top: 5px;"> 
        <span>序号</span> 
        <span>姓名</span> 
        <span>性别</span> 
        <span>年龄</span> 
        <span>分数</span> 
      </li> 
      <li ng-repeat=" stu in data | filter : {name:key}" style="font-size: 16px"> 
        <span>{{$index+1}}</span> 
        <span>{{stu.name}}</span> 
        <span>{{stu.sex}}</span> 
        <span>{{stu.age}}</span> 
        <span>{{stu.score}}</span> 
      </li> 
    </ul> 
  </div> 
 </div> 
</body> 
</html>

截图：

以上所述是小编给大家介绍的Bootstrap + AngularJS 实现简单的数据过滤字符查找，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

# bootstrap # angularjs # 数据过滤 # 字符查找 # JS对大量数据进行多重过滤的方法 # JavaScript常用数组元素搜索或过滤的四种方法详解 # JS中filter( )数组过滤器的使用 # JavaScript中数据过滤的几种常见方法 # 小编 # 在此 # 给大家 # 请输入 # 所示 # 所述 # 给我留言 # 感谢大家 # 疑问请 # 有任何 # list # ul # px # padding # margin # width # nofollow # external # css # style

返回目录在线咨询

上一篇：安徽网站建设如何选择可靠服务商？
下一篇：安徽网站建设CNFG如何实现高效定制化服务？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

Bootstrap + AngularJS 实现简单的数据过滤字符查找功能

您的项目需求