使用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: '&'
</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: '&'
</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> 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><div> class<span>="items"</span> ng-hide<span>="!model.length || selected"</span>>
  <span><span><span><div> 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><p> class<span>="title"</span>></p></span>{{item[title]}}<span><span></span>></span>
</span>    <span><span><span><p> class<span>="subtitle"</span>></p></span>{{item[subtitle]}}<span><span></span>></span>
</span>  <span><span><span></span></span></span></span></span>
</div></span>></span>
</span><span><span><span></span></span></span>
</div></span>></span></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中文网其他相关文章！