使用AngularJS創建一個打字機小部件-SitePoint

態如果您要啟動一個AngularJS項目，則可能需要將所有組件寫成Angular。儘管當然有可能重複使用現有的jQuery插件，但是在指令中扔一堆jQuery並不總是正確的方法。我的建議是首先檢查是否可以以更簡單/更好的方式用純角度實現同一件事。這使您的應用程序代碼保持清潔和可維護。該教程針對初學者，使讀者通過Angularjs創建了一個簡單的打字窗口小部件。

鑰匙要點

• >教程指南通過創建帶有AngularJS的打字窗口小部件，該小部件在文本框中提供了建議。該小部件的設計為高度可配置並容易集成到現有系統中。 該過程涉及建立與RESTFUL API交互的工廠，並返回JSON數據以自動完成建議，創建一個指令，以封裝打字機輸入字段，並為該指令創建模板。該指令可配置為最終用戶調整選項，例如JSON對象屬性，以顯示作為建議範圍中的建議的一部分，並將其模型保存在控制器的範圍中。
>教程還解釋瞭如何更新指令的鏈接功能並配置指令以供使用。最終產品是帶有配置選項的AngularJS打字小部件，可以使用CSS進一步自定義。完整的源代碼可在GitHub上下載。
• 概述
在本教程中，我們將構建一個簡單的打字小部件，該小部件在某人開始輸入文本框後立即提出建議。我們將以最終產品的配置方式來構建應用程序，並可以輕鬆地插入現有系統。創建過程中涉及的基本步驟是：

創建一個與Restful API交互的工廠，並返回將用於自動完整建議的JSON。

>創建一個指令，該指令將使用JSON數據並封裝打字機輸入字段。

• >保持指令可配置，以便最終用戶可以配置以下選項。
配置選項

>作為建議的一部分顯示的確切的JSON對象屬性。

控制器範圍中的模型將保存所選項目。 >

>控制器範圍中的功能在選擇項目時執行。
>打字輸入字段的佔位符文本（提示）。

步驟1：建造一個獲取數據的工廠

作為第一步，讓我們創建一個使用Angular的$ HTTP服務與Restful API互動的工廠。看看以下片段：

<span>var typeAhead = angular.module('app', []);
</span>
typeAhead<span>.factory('dataFactory', function($http) {
</span>  <span>return {
</span>    <span>get: function(url) {
</span>      <span>return $http.get(url).then(function(resp) {
</span>        <span>return resp.data; // success callback returns this
</span>      <span>});
</span>    <span>}
</span>  <span>};
</span><span>});</span>

以前的代碼創建了一個名為DataFactory的工廠，該工廠從API中檢索JSON數據。我們不會介紹工廠的詳細信息，但是我們需要簡要了解$ HTTP服務的工作原理。您將URL傳遞到get（）函數，該函數返回承諾。然後，對此諾言的另一個呼籲也返回另一個承諾（我們從工廠的get（）函數中返回了這一承諾）。通過將成功回調的回報值傳遞給當時（），該承諾得到解決。因此，在控制器內部，我們不會直接與$ HTTP互動。相反，我們要求控制器中的工廠實例，並使用URL調用其get（）函數。因此，我們與工廠交互的控制器代碼看起來像這樣：

typeAhead<span>.controller('TypeAheadController', function($scope<span>, dataFactory</span>) { // DI in action
</span>  dataFactory<span>.get('states.json').then(function(data) {
</span>    $scope<span>.items = data;
</span>  <span>});
</span>  $scope<span>.name = ''; // This will hold the selected item
</span>  $scope<span>.onItemSelected = function() { // this gets executed when an item is selected
</span>    <span>console.log('selected=' + $scope.name);
</span>  <span>};
</span><span>});</span>

以前的代碼使用稱為狀態的API端點。 JSON返回美國州的JSON列表。數據可用時，我們將列表存儲在範圍模型項目中。我們還使用模型名稱保存所選項目。最後，當用戶選擇特定狀態時，onItemselected（）函數將執行。

>步驟2：創建指令

讓我們從如下所示的Typeahead指令開始。

typeAhead<span>.directive('typeahead', function($timeout) {
</span>  <span>return {
</span>    <span>restrict: 'AEC',
</span>    <span>scope: {
</span>      <span>items: '=',
</span>      <span>prompt: '@',
</span>      <span>title: '@',
</span>      <span>subtitle: '@',
</span>      <span>model: '=',
</span>      <span>onSelect: '&amp;'
</span>    <span>},
</span>    <span>link: function(scope<span>, elem, attrs</span>) {
</span>    <span>},
</span>    <span>templateUrl: 'templates/templateurl.html'
</span>  <span>};
</span><span>});</span>

在指令中，我們正在創建一個定義幾個屬性的孤立範圍：

• 項目：用於將JSON列表傳遞給孤立範圍。 提示：用於傳遞佔位符文本的一種綁定打字機輸入字段。
• >標題和字幕：自動完整字段的每個條目都有標題和字幕。大多數Typeahead小部件都是這樣工作的。他們通常（如果不是總是）在下拉建議中的每個條目中都有兩個字段。如果JSON對象具有其他屬性，則可以用作傳遞在下拉列表中每個建議中將顯示的兩個屬性的一種方式。在我們的情況下，標題對應於狀態的名稱，而字幕表示其縮寫。
• 型號：兩種方式綁定以存儲選擇。
• OnSelect：方法綁定，一旦選擇結束後，用於執行控制器範圍中的函數。

注意：JSON響應示例如下：

<span>var typeAhead = angular.module('app', []);
</span>
typeAhead<span>.factory('dataFactory', function($http) {
</span>  <span>return {
</span>    <span>get: function(url) {
</span>      <span>return $http.get(url).then(function(resp) {
</span>        <span>return resp.data; // success callback returns this
</span>      <span>});
</span>    <span>}
</span>  <span>};
</span><span>});</span>

>步驟3：創建模板

現在，讓我們創建一個將由該指令使用的模板。

typeAhead<span>.controller('TypeAheadController', function($scope<span>, dataFactory</span>) { // DI in action
</span>  dataFactory<span>.get('states.json').then(function(data) {
</span>    $scope<span>.items = data;
</span>  <span>});
</span>  $scope<span>.name = ''; // This will hold the selected item
</span>  $scope<span>.onItemSelected = function() { // this gets executed when an item is selected
</span>    <span>console.log('selected=' + $scope.name);
</span>  <span>};
</span><span>});</span>

首先，我們渲染一個輸入文本字段，用戶將在其中輸入。範圍屬性提示分配給佔位符屬性。接下來，我們瀏覽狀態列表，並顯示名稱和縮寫屬性。這些屬性名稱是通過標題和字幕範圍屬性配置的。指令NG-Mouseenter和NG類用於突出顯示用戶與鼠標徘徊的條目。接下來，我們使用過濾器：模型，該模型通過輸入字段中輸入的文本過濾列表。最後，當輸入文本字段為空或用戶選擇項目時，我們使用了NG-HIDE指令隱藏列表。所選屬性設置為true handleselection（）函數內部，並將某人開始輸入輸入字段時設置為false（顯示建議列表）。

步驟4：更新鏈接函數

接下來，讓我們更新指令的鏈接功能，如下所示。

typeAhead<span>.directive('typeahead', function($timeout) {
</span>  <span>return {
</span>    <span>restrict: 'AEC',
</span>    <span>scope: {
</span>      <span>items: '=',
</span>      <span>prompt: '@',
</span>      <span>title: '@',
</span>      <span>subtitle: '@',
</span>      <span>model: '=',
</span>      <span>onSelect: '&amp;'
</span>    <span>},
</span>    <span>link: function(scope<span>, elem, attrs</span>) {
</span>    <span>},
</span>    <span>templateUrl: 'templates/templateurl.html'
</span>  <span>};
</span><span>});</span>

功能handleselection（）用選定的狀態名稱更新範圍屬性，模型。然後，我們重置當前和選定的屬性。接下來，我們將函數OnSelect（）稱為函數。添加延遲是因為分配範圍。 model= SelectedItem不會立即更新綁定的控制器範圍屬性。在使用所選項目更新模型後，希望執行控制器範圍回調函數。這就是我們使用$超時服務的原因。 此外，在模板中使用函數ISCurrent（）和setCurrent（），以突出顯示自動完整建議中的條目。以下CSS還用於完成高光進程。

<span>{
</span>  <span>"name": "Alabama",
</span>  <span>"abbreviation": "AL"
</span><span>}</span>

步驟5：配置並使用指令

最後，讓我們在HTML中調用指令，如下所示。

<span><span><span><input</span> type<span>="text"</span> ng-model<span>="model"</span> placeholder<span>="{{prompt}}"</span> ng-keydown<span>="selected=false"</span> /></span>
</span><span><span><span><br</span>/></span>
</span>
<span><span><span><div</span> class<span>="items"</span> ng-hide<span>="!model.length || selected"</span>></span>
</span>  <span><span><span><div</span> class<span>="item"</span> ng-repeat<span>="item in items | filter:model  track by $index"</span> ng-click<span>="handleSelection(item[title])"</span> <span>style<span>="<span>cursor:pointer</span>"</span></span> ng-class<span>="{active:isCurrent($index)}"</span> ng-mouseenter<span>="setCurrent($index)"</span>></span>
</span>    <span><span><span><p</span> class<span>="title"</span>></span>{{item[title]}}<span><span></p</span>></span>
</span>    <span><span><span><p</span> class<span>="subtitle"</span>></span>{{item[subtitle]}}<span><span></p</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>

結論

本教程向您展示瞭如何使用配置選項創建AngularJS Typeahead小部件。完整的源代碼可在GitHub上下載。如果某事尚不清楚或您想改進任何東西，請隨時發表評論。另外，別忘了檢查現場演示。

>關於創建使用AngularJS >如何通過使用CSS來自定義Typeahead下拉列表的外觀？您可以使用class .Dropdown-menu來定位下拉菜單。例如，如果要更改背景顏色和字體顏色，則可以使用以下CSS代碼：

.dropdown-menu { background-color：＃f8f9fa;

顏色：＃color：＃color： ＃ 343A40;

}
記住將此CSS包含在您的主CSS文件中或HTML文件中的標籤中。 >

>如何通過使用Typeahead-min-min-length屬性來完成打字機下拉下拉中的建議數量？此屬性指定在打字開始之前必須輸入的最小字符數。

>如何使用Typeahead？打字，您可以使用鍵入選項的屬性。此屬性允許您在選擇匹配時指定一個函數。該函數將通過選定的項目傳遞。例如：

在您的控制器中，您可以這樣定義這樣的ONSELECT函數：

$ scope.onelect = function（item，model，label）{

//對所選項目
};


>我可以在AngularJS中使用Bootstrap使用Typeahead？該模塊根據Bootstrap的標記和CSS提供了一組AngularJS指令。 Typeahead指令可用如下：


在此示例中，狀態是一個狀態。狀態數組，$ viewValue是用戶輸入的值，Limitto：8將建議數限制為8。 AngularJS？

>使用Typeahead與AngularJS中的遠程數據使用，您可以使用$ HTTP服務從遠程服務器獲取數據。打字機屬性可用於將輸入字段綁定到被提取的數據。例如：

$ scope.getStates = function（val）{
>返回$ http.get（'/api/state'，{params：{}
}）。 item.name;
}）;

}）;

};

}; 在您的html中，您可以使用這樣的getStates函數：



在此示例中，getStates是一個基於遠程服務器的狀態的函數用戶。

以上是使用AngularJS創建一個打字機小部件-SitePoint的詳細內容。更多資訊請關注PHP中文網其他相關文章！