Bootstrap + AngularJS 實現(xiàn)簡單的數(shù)據(jù)過濾字符查找功能

更新時間：2017年07月27日 14:20:55 作者：海哥_大大的Java

這篇文章主要介紹了 Bootstrap + AngularJS 實現(xiàn)簡單的數(shù)據(jù)過濾字符查找功能，代碼簡單易懂，非常不錯具有參考借鑒價值,需要的朋友可以參考下

具體代碼如下所示：

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>分數(shù)</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 實現(xiàn)簡單的數(shù)據(jù)過濾字符查找，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

angular6 利用 ngContentOutlet 實現(xiàn)組件位置交換(重排)
這篇文章主要介紹了angular6 利用 ngContentOutlet 實現(xiàn)組件位置交換(重排)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-11-11
AngularJs實現(xiàn)ng1.3+表單驗證
這篇文章主要介紹了AngularJs實現(xiàn)ng1.3+表單驗證，感興趣的小伙伴們可以參考一下
2015-12-12
AngularJS 監(jiān)聽變量變化的實現(xiàn)方法
今天小編就為大家分享一篇AngularJS 監(jiān)聽變量變化的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-10-10
Angular下H5上傳圖片的方法（可多張上傳）
本文給大家分享在使用angular上傳圖片的功能，在開發(fā)過程中遇到很多問題，最終都解決了，今天小編給大家介紹下Angular下H5上傳圖片的方法（可多張上傳),非常不錯，需要的朋友參考下
2017-01-01
Angular.Js的自動化測試詳解
當Angular項目的規(guī)模到達一定的程度，就需要進行測試工作了。為什么要自動化測試？1，提高產出質量。2，減少重構時的痛。反正我最近重構多了，痛苦經(jīng)歷多了。3，便于新人接手。下面這篇文章就給大家詳細介紹了Angular.Js的自動化測試，有需要的朋友們可以參考借鑒。
2016-12-12
Angularjs自定義指令Directive詳解
Directive是一個非常棒的功能?？梢詫崿F(xiàn)我們自義的的功能方法。下面通過實例代碼給大家介紹Angularjs自定義指令Directive相關知識，感興趣的朋友一起學習吧
2017-05-05
深入解析Angular動態(tài)導入和懶加載實例
這篇文章主要為大家深入解析了Angular動態(tài)導入和懶加載實例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
2023-10-10
Angular 組件之間的交互的示例代碼
這篇文章主要介紹了Angular 組件之間的交互的示例代碼，根據(jù)數(shù)據(jù)的傳遞方向，分為父組件向子組件傳遞、子組件向父組件傳遞及通過服務傳遞三種交互方法。非常具有實用價值，需要的朋友可以參考下
2018-03-03
Angular5給組件本身的標簽添加樣式class的方法
本篇文章主要介紹了Angular 5 給組件本身的標簽添加樣式class的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-04-04
angularjs中的e2e測試實例
這篇文章主要介紹了angularjs中的e2e測試實例,本文使用Protractor來完成e2e測試,需要的朋友可以參考下
2014-12-12