javascript - 从给定文本开始的 Angularjs 过滤器搜索

标签 javascript jquery angularjs

我有以下 html 代码:

  <p><input type="text" ng-model="test"></p>
  <ul>
   <li ng-repeat="x in names | filter:test">
    {{ x }}
   </li>
  </ul>

对应的JS是:

<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.names = [
        'Jabi',
        'Cabi',
        'Margareth',
        'Hege',
        'Joe',
        'Gustav',
        'Birgit',
        'Mary',
        'Kai'
    ];
});
</script>

问题是当我键入“bi”时,过滤器会返回所有包含“bi”的名称,但是我希望过滤器应该只返回以“bi”开头的名称(或者 watever 写在输入文本框中)

最佳答案

由于您只需要匹配的大小写/字母,因此您必须按如下方式创建自定义过滤器,

演示

angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.names = [
        'Jabi',
        'Cabi',
        'Margareth',
        'Hege',
        'Joe',
        'Gustav',
        'Birgit',
        'Mary',
        'Kai'
    ];
    
$scope.onlyMatch = function (input, output) {
    var Str = (input + "").toLowerCase();
    return Str.indexOf(output.toLowerCase()) === 0;
}

 
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="namesCtrl">
<p><input type="text" ng-model="test"></p>
  <ul>
   <li ng-repeat="x in names |  filter:test:onlyMatch">
    {{ x }}
   </li>
  </ul>
  </body>

关于javascript - 从给定文本开始的 Angularjs 过滤器搜索,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48536199/

相关文章:

javascript - SignalR 仅在事件 SILO 中可用

javascript - 从一个子域到另一个子域的 AJAX 请求,但在同一个域上

javascript - 通过 Flask 将 numpy 数组作为字节从 python 发送到 JS

javascript - CKEditor 不适用于 Bootstrap 模式

javascript - 解析 Angular 模型属性中的 <img> 标签

javascript - AngularJS 应用程序为多个 Controller 加载和处理一次 JSON 数据

javascript - HTML 菜单上的 addClass/removeClass 不起作用

javascript - 用 JavaScript 变量替换表单中的隐藏值

javascript - 调整大小并使用 js 使用 resize() 方法实时查看结果

javascript - 如何选择在 ajax 请求中显示的内容?