我想创建一个可以按短名称和全名过滤的过滤器
我已经用全名完成了
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>
(该示例区分大小写(