Bootstrap + AngularJS 實現簡單的數據過濾字符查找功能

來源：懂視網責編：小采時間：2020-11-27 22:33:53

Bootstrap + AngularJS 實現簡單的數據過濾字符查找功能

Bootstrap + AngularJS 實現簡單的數據過濾字符查找功能: 具體代碼如下所示： find.html <!DOCTYPE html> <html ng-app=find> <head> <title>字符查找</title> <meta charset=utf-8/> <script src=../Script/a

推薦度：

點擊下載本文 文檔為doc格式

導讀Bootstrap + AngularJS 實現簡單的數據過濾字符查找功能: 具體代碼如下所示： find.html <!DOCTYPE html> <html ng-app=find> <head> <title>字符查找</title> <meta charset=utf-8/> <script src=../Script/a

具體代碼如下所示：

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>

截圖：