首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在angularjs的文本框中输入@时显示名称列表

在AngularJS的文本框中输入@时显示名称列表,可以通过以下步骤实现:

  1. 创建一个AngularJS控制器,并在控制器中定义一个包含名称列表的数组。例如:
代码语言:javascript
复制
app.controller('MainController', function($scope) {
  $scope.names = ['Alice', 'Bob', 'Charlie', 'David'];
});
  1. 在HTML页面中使用ng-model指令绑定文本框的值到一个变量。例如:
代码语言:html
复制
<div ng-controller="MainController">
  <input type="text" ng-model="searchText" ng-keyup="showNames()" />
  <ul>
    <li ng-repeat="name in filteredNames">{{ name }}</li>
  </ul>
</div>
  1. 在控制器中定义一个函数,用于根据输入的文本过滤名称列表,并将过滤后的结果赋值给另一个变量。例如:
代码语言:javascript
复制
app.controller('MainController', function($scope) {
  $scope.names = ['Alice', 'Bob', 'Charlie', 'David'];
  
  $scope.showNames = function() {
    $scope.filteredNames = $scope.names.filter(function(name) {
      return name.toLowerCase().includes($scope.searchText.toLowerCase());
    });
  };
});
  1. 使用ng-repeat指令在HTML页面中循环显示过滤后的名称列表。例如:
代码语言:html
复制
<div ng-controller="MainController">
  <input type="text" ng-model="searchText" ng-keyup="showNames()" />
  <ul>
    <li ng-repeat="name in filteredNames">{{ name }}</li>
  </ul>
</div>

这样,当在文本框中输入@时,会根据输入的文本过滤名称列表,并在下方显示匹配的名称列表。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云数据库(TencentDB)。

  • 腾讯云云服务器(CVM):提供弹性计算能力,可根据业务需求灵活调整配置和规模。了解更多信息,请访问腾讯云云服务器
  • 腾讯云数据库(TencentDB):提供可扩展的、高性能的数据库解决方案,支持多种数据库引擎。了解更多信息,请访问腾讯云数据库
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券