自定义 angularjs 中短名称和全名的过滤器



我想创建一个可以按短名称和全名过滤的过滤器

我已经用全名完成了

angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
'Indian Overseas Bank',
'Housing Development Finance Corporation',
'Industrial Credit and Investment Corporation of India',
'Indian Bank',
'City Bank',
'City Union Bank',
'Kotak Mahindra Bank',
'Tamilnadu Mercantile Bank ',
'State Bank Of India'
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<div ng-app="myApp" ng-controller="namesCtrl">
<p>Type a letter in the input field:</p>
<p><input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="x in names | filter:test">
{{ x }}
</li>
</ul>
</div>

但我不确定,我如何像IOB, HDFC, SBI一样按短名称过滤?

我希望结果像

Filter word     : Expected result 
IOB             : Indian Overseas Bank 
HDFC            : Housing Development Finance Corporation
SBI             : Stete Bank of India
ICICI           : Industrial Credit and Investment Corporation of India'

注意:这些银行是印度银行。看,当我按SBI and ICICI过滤时,过滤器将无法识别of, and单词。

另外,如果我输入像india这样的普通单词,那么我希望结果会像我在代码片段中所做的一样india过滤。怎么能这样呢?

显然,您需要一个自定义过滤器。你的工作是将单词分解成缩写。然后,您可以像普通过滤器一样简单地将模型与您的缩写匹配,我建议.indexOf()方法。

这是我的简单演示:

var app = angular.module('myApp', []);
app.filter('myFilter', function() {
return function(inp, model) {
if (!model) {
return inp;
}
var ignore = ["of", "and", "Of", "And"];
var array = [];
for (var i = 0; i < inp.length; i++) {
var str = "";
var arr = inp[i].split(" ");
for (var j = 0; j < arr.length; j++) {
if (ignore.indexOf(arr[j]) == -1) {
str += arr[j][0];
}
}
// str = str.toLowerCase();
// model = model.toLowerCase();
if (str.indexOf(model) != -1) {
array.push(inp[i]);
}
}
return array;
};
});
app.controller('namesCtrl', function($scope) {
$scope.names = [
'Indian Overseas Bank',
'Housing Development Finance Corporation',
'Industrial Credit and Investment Corporation of India',
'Indian Bank',
'City Bank',
'City Union Bank',
'Kotak Mahindra Bank',
'Tamilnadu Mercantile Bank ',
'State Bank Of India'
];
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<p>Type a letter in the input field:</p>
<p><input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="x in names | myFilter:test">
{{ x }}
</li>
</ul>
</div>
</body>
</html>

(该示例区分大小写(

最新更新