資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 AngularJS 中根據使用者輸入過濾陣列？
概述
陣列可以是任何事物的集合，但應該具有相同的資料型別。我們可以儲存陣列的任何數字和文字，因此，使用 AngularJs 從陣列中過濾資料可以透過一些鍵值屬性對來實現。過濾器規則在建立此功能方面起著關鍵作用，還有一些 AngularJs 屬性在構建此功能方面起著重要作用，它們是：ng−model 和 ng−repeat。ng−model 屬性定義輸入型別文字搜尋框以連線到有序列表並從中過濾陣列。
AngularJs CDN 連結
給定的指令碼標籤是 AngularJs 框架的內容交付網路 (CDN) 連結，要使用 AngularJs 的功能和模組，請將此 CDN 連結新增到您的 HTML 文件中。
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> </script>
演算法
步驟 1 − 在您的文字編輯器上建立一個 HTML 檔案，檔名設定為“index.html”，將 HTML 基本結構新增到 index.html 檔案中。
步驟 2 − 現在，要將 AngularJs 模組用於您的檔案，請將上面給出的 CDN 連結新增到 HTML 文件的 head 標籤中。
步驟 3 − 現在為過濾器介面建立一個父 div 標籤，並向該標籤新增一個屬性作為 ng−app，其值為“myApp”。
<div ng-app="myApp"></div>
步驟 4 − 現在在父 ng−app 容器內建立一個 div 控制器，並向 div 標籤新增一個屬性作為 ng−controller，並將值“myController”新增到該屬性中。
<div ng-controller="myController"></div>
步驟 5 − 現在建立一個 HTML 搜尋欄，型別為“text”，向輸入標籤新增一個屬性作為 ng−model，其值為“filterList”。
<input type="text" name=" filterText " id=" filterText " ng-model="filterList">
步驟 6 − 現在在 body 的結束標籤之前建立一個指令碼標籤。
<script></script>
步驟 7 − 現在使用 Angular 語法建立一個模組，並將其與 HTML 介面 ng−app 以及 ng−controller 連線起來。還將“$scope”作為引數傳遞給控制器箭頭函式。
angular.module("myApp", []).controller("myController", ($scope) => {
});
步驟 8 − 現在使用 $scope 全域性變數為陣列建立一個變數。還將初始化的資料儲存到陣列中。
angular.module("myApp", []).controller("myController", ($scope) => {
$scope.lists = ["Apple" , "Pomegranete" , "Guava2" , "Watermelon" , "Casew" , "Plums" , "Zebra" , "Quest" , "Guava1"];
});
步驟 9 − 現在在 HTML 輸入標籤下方建立一個無序列表，以將渲染的陣列獲取到網頁的介面中。
<ul></ul>
步驟 10 − 向無序列表新增列表標籤，並將其屬性設定為 ng−repeat。
<li ng-repeat=""> </li>
步驟 11 − 現在使用“in”迴圈將資料從陣列渲染到無序列表的列表中，並在列表標籤中的 {{expression}} 之間新增表示式名稱。
<li ng-repeat="list in lists"> {{ list }} </li>
步驟 12 − 要向搜尋框新增過濾功能，請在迴圈中繼續在 ng−repeat 屬性中新增帶“|”的值。
<li ng-repeat="list in lists | filter:filterList"> {{ list }} </li>
步驟 13 − 使用 AngularJs 成功建立了陣列過濾器。
示例
在這個示例中，我們將學習當用戶向輸入框輸入任何值時，如何使用 AngularJs 框架過濾陣列。為此，我們將匯入框架 CDN 連結並建立一個列表，以便我們將在指令碼標籤中建立的陣列可以渲染到使用者介面中。因此，要向陣列新增過濾功能，使用了“filter:inputTagNgModelName”。在 for in 迴圈中用於儲存和渲染列表資料的名稱應與列表標籤中的表示式完全相同。
<html>
<head>
<title> Filter an array using AngularJs </title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="myController">
<input type="text" name=" filterText " id=" filterText " ng-model="filterList">
<ul>
<li ng-repeat="list in lists | filter:filterList"> {{ list }} </li>
</ul>
</div>
</div>
<script>
angular.module("myApp", []).controller("myController", ($scope) => {
$scope.lists = ["Apple" , "Pomegranete" , "Guava2" , "Watermelon" , "Casew" , "Plums" , "Zebra" , "Quest" , "Guava1"];
});
</script>
</body>
</html>
下圖顯示了上述示例的輸出，因此，當用戶在瀏覽器上載入它時，他將獲得一個帶有列表和搜尋欄的介面。在搜尋欄中，您可以鍵入從 A 到 Z 的任何字母，並在搜尋欄下方獲得過濾後的列表作為結果。由於列表是從陣列中渲染的，因此過濾器直接從陣列中過濾資料。由於使用者在搜尋框中鍵入了字母“A”，因此從下面的列表中，所有拼寫中包含字母“A”的資料都顯示為新列表。
結論
由於我們使用的是 AngularJs 的 CDN 連結，因此要使指令碼在您的瀏覽器中執行，需要連線到您的網際網路連線，如果您的系統未連線到網際網路，則列表可能不會渲染到瀏覽器的螢幕上，並且只會顯示錶達式變數。我們建立的上述功能廣泛用於通訊錄或資料庫中過濾資料。我們還可以使用此功能從電話簿中過濾數字。您應該確保參與過濾陣列的所有屬性的拼寫都正確，因為如果任何拼寫不正確，則列表可能無法正確渲染，並且您可能會得到一個空白的瀏覽器頁面。我們還可以使用層疊樣式表自定義此功能，以建立具有吸引力的使用者介面。
223 次檢視
