在Angular中如何實作下拉框模糊查詢功能-js教程-PHP中文網

首頁

web前端

js教程

在Angular中如何實作下拉框模糊查詢功能

亚连

Jun 13, 2018 pm 06:00 PM

angular下拉框模糊查詢

這篇文章主要介紹了Angular實作下拉框模糊查詢功能,涉及AngularJS事件回應及字串查詢等相關操作技巧,需要的朋友可以參考下

本文實例講述了Angular實作下拉框模糊查詢功能。分享給大家參考，具體如下：

前兩天研究了一下angularjs，不得不說angularjs的mvc思想還是很強大的。對應偏重於資料處理的項目還是非常有優勢的。

寫了個搜尋下拉框的demo，註解在裡邊都寫了，就不再這囉嗦了。

1. 普通方式實作

<!DOCTYPE html>
<html>
<head lang="zh_CN">
<meta charset="utf-8">
<title>www.jb51.net Angular模糊匹配</title>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" type="text/javascript"></script>
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body >
<p ng-app="myApp" ng-controller="myCtrl">
 <input type = &#39;test&#39; ng-change="changeKeyValue(searchField)" ng-model="searchField" style = &#39;display:block;width:200px&#39; ng-click = &#39;hidden=!hidden&#39; value="{{searchField}}"/></input>
 <p ng-hide="hidden">
  <select style = &#39;width:200px&#39; ng-change="change(x)" ng-model="x" multiple>
   <option ng-repeat="data in datas" >{{data}}</option>
  </select>
 </p>
</p>
<p>
<p><h1 id="angular输入选择框">angular输入选择框</h1></p>
<p><h2 id="逻辑实现步骤">逻辑实现步骤</h2></p>
<p>1文本框做输入，并监控器change事件，在change事件中获取输入值，获取的输入值与选择框中的各个下拉项进行比较</p>
<p>2如果包含则只显示包含的部分，不包含则显示全部</p>
<p>
<script>
var app = angular.module(&#39;myApp&#39;, []);
app.controller(&#39;myCtrl&#39;, function($scope) {
 $scope.datas = ["key4","xyz","key3","xxxx","key2","value2","key1","value1"]; //下拉框选项
 $scope.tempdatas = $scope.datas; //下拉框选项副本
 $scope.hidden=true;//选择框是否隐藏
 $scope.searchField=&#39;&#39;;//文本框数据
 //将下拉选的数据值赋值给文本框
 $scope.change=function(x){
  $scope.searchField=x;
  $scope.hidden=true;
 }
 //获取的数据值与下拉选逐个比较，如果包含则放在临时变量副本，并用临时变量副本替换下拉选原先的数值，如果数据为空或找不到，就用初始下拉选项副本替换
 $scope.changeKeyValue=function(v){
  var newDate=[]; //临时下拉选副本
  //如果包含就添加
  angular.forEach($scope.datas ,function(data,index,array){
   if(data.indexOf(v)>=0){
    newDate.unshift(data);
   }
  });
  //用下拉选副本替换原来的数据
  $scope.datas=newDate;
  //下拉选展示
  $scope.hidden=false;
  //如果不包含或者输入的是空字符串则用初始变量副本做替换
  if($scope.datas.length==0 || &#39;&#39;==v){
   $scope.datas=$scope.tempdatas;
  }
  console.log($scope.datas);
 }
});
</script>
</html>

2. 指令方式實作

<!DOCTYPE html>
<html>
<head lang="zh_CN">
<meta charset="utf-8">
<title>www.jb51.net Angular模糊匹配</title>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" type="text/javascript"></script>
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body >
<p ng-app="myApp" ng-controller="myCtrl">
 <p>
  <select-search datas="datas"></select-search>
 </p>
</p>
<p>
<p><h1 id="angular输入选择框-nbsp-自定义指令方式">angular输入选择框 自定义指令方式</h1></p>
<p><h2 id="逻辑实现步骤">逻辑实现步骤</h2></p>
<p>1文本框做输入，并监控器change事件，在change事件中获取输入值，获取的输入值与选择框中的各个下拉项进行比较</p>
<p>2如果包含则只显示包含的部分，不包含则显示全部</p>
<p>
<script>
var app = angular.module(&#39;myApp&#39;, []);
app.controller(&#39;myCtrl&#39;, function($scope) {
  $scope.datas = ["key4","xyz","key3","xxxx","key2","value2","key1","value1"]; //下拉框选项
});
app.directive(&#39;selectSearch&#39;, function($compile) {
 return {
 restrict: &#39;AE&#39;, //attribute or element
 scope: {
  datas: &#39;=&#39;,
  //bindAttr: &#39;=&#39;
 },
 template:
 &#39;<input type = "test" ng-change="changeKeyValue(searchField)" ng-model="searchField" style = "display:block;width:200px" &#39;+
 &#39;ng-click = "hidden=!hidden" value="{{searchField}}"/></input>&#39;+
 &#39;<p ng-hide="hidden">&#39;+
 &#39; <select style = "width:200px" ng-change="change(x)" ng-model="x" multiple>&#39;+
 &#39;  <option ng-repeat="data in datas" >{{data}}</option>&#39;+
 &#39; </select>&#39;+
 &#39;</p>&#39;,
 // replace: true,
 link: function($scope, elem, attr, ctrl) {
  $scope.tempdatas = $scope.datas; //下拉框选项副本
  $scope.hidden=true;//选择框是否隐藏
  $scope.searchField=&#39;&#39;;//文本框数据
 //将下拉选的数据值赋值给文本框
  $scope.change=function(x){
   $scope.searchField=x;
   $scope.hidden=true;
  }
 //获取的数据值与下拉选逐个比较，如果包含则放在临时变量副本，并用临时变量副本替换下拉选原先的数值，如果数据为空或找不到，就用初始下拉选项副本替换
  $scope.changeKeyValue=function(v){
   var newDate=[]; //临时下拉选副本
  //如果包含就添加
   angular.forEach($scope.datas ,function(data,index,array){
    if(data.indexOf(v)>=0){
     newDate.unshift(data);
    }
   });
  //用下拉选副本替换原来的数据
   $scope.datas=newDate;
  //下拉选展示
   $scope.hidden=false;
  //如果不包含或者输入的是空字符串则用初始变量副本做替换
   if($scope.datas.length==0 || &#39;&#39;==v){
    $scope.datas=$scope.tempdatas;
   }
   console.log($scope.datas);
  }
 }
 };
});
</script>
</html>

最終效果如下：

注意這裡對select標籤設定了multiple屬性，所以在頁面上input標籤能覆蓋select標籤

#如果不用multiple屬性，需自行用p模擬實現select標籤效果

上面是我整理給大家的，希望今後會對大家有幫助。

在jQuery中如何實現滑鼠響應式淘寶動畫效果

如何使用jQuery實現滑鼠響應式透明度漸變動畫效果

在JavaScript中如何判斷NaN

以上是在Angular中如何實作下拉框模糊查詢功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

JavaScript引擎：比較實施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。

超越瀏覽器：現實世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制：1.通過Node.js實現服務器端編程，適用於高並發請求處理。 2.通過ReactNative進行移動應用開發，支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制，適用於硬件交互。

使用Next.js（後端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序（一個Edtech應用程序），您可以做同樣的事情。首先，什麼是多租戶SaaS應用程序？多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js（前端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript：探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。

JavaScript的演變：當前的趨勢和未來前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

神秘的JavaScript：它的作用以及為什麼重要Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。