Angular JS的“Startswith”自定义过滤器

Question

我一直在尝试制作一个自定义筛选器，它可以搜索“以...开头”的参数而不是“包含”的参数。但我写的每个过滤器似乎都不能正常工作。以下是我试图实现的示例--->http://jsfiddle.net/DMSChris/9ptr9/

function FilterCtrl() {
var scope = this;
scope.doFilter = function(elem) { 
    if(!scope.searchText) return true;
    return elem.last_name.toLowerCase().indexOf( scope.searchText.toLowerCase()) == 0; 
};

}

http://jsbin.com/OyubElO/1/edit - 这是我目前所在的位置。

  <ul border="1px" ng-repeat="msg in messages | filter:search:strict">

<li>{{msg.last_name}}</li>

任何帮助都将不胜感激！

- Chris Pena

---

如果 elem.last_name 可能是一个很长的字符串，你可能需要考虑截断后再使用 === 进行比较以查找文本。 - Paul S.

Answer 1

一个简单的方法是向您的范围添加一个新的方法。

$scope.startsWith = function (actual, expected) {
    var lowerStr = (actual + "").toLowerCase();
    return lowerStr.indexOf(expected.toLowerCase()) === 0;
}

然后更改您元素上的筛选器语法。

<ul border="1px" ng-repeat="msg in messages | filter:search:startsWith">

这里有一个可运行的 plunkr，包含上面的示例。

- mark

---

@Robin，我已经添加了一个包含示例的Plunkr。你遇到了什么问题？ - mark

@mark plunkr似乎不在那里。但这对我有用！！ - Shadow

@Shadow 谢谢你告诉我！我整理了我的代码片段，不小心删除了那个。现在已经重新创建了。 - mark

对此进行了扩展问题，涉及格式化过滤结果。非常感谢任何帮助！ https://stackoverflow.com/questions/46728544/highlight-search-text-in-the-search-results-using-angularjs-filter - Sunny

谢谢 Mark，超级解决方案。 - Venkaiah Yepuri

Answer 2

对象中的过滤器

  $scope.fmyData = $filter('filter')($scope.AllMyData, $scope.filterOptions,function (actual, expected) {
                    return actual.toLowerCase().indexOf(expected.toLowerCase()) == 0;
                });

- user3454062

---

嗨@user35..，有可用的Plunker吗？我真的需要它。谢谢。 - Venkaiah Yepuri

Answer 3

现在纯粹的 javascript 自身具有字符串的 startsWith() 方法。但它将不受 IE11 支持。

请看这里：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith

- vissu