使用Angular.js输入部分名称时,搜索功能不起作用
我遇到问题。我使用angular.js根据Restaurant Name
从我的表中搜索功能。假设有许多'餐厅名称',并且如果用户输入任何名称的第一个字母,则在按2/3字母正确过滤之后,它不会根据需要进行过滤。让我在下面解释我的代码。使用Angular.js输入部分名称时,搜索功能不起作用
<div class="input-group" style="margin-bottom:10px; width:300px;">
<input class="form-control" placeholder="Type Restaurant Name" name="q" type="text" ng-model="searchProduct.rest_name">
</div>
<table class="table table-bordered table-striped table-hover" id="dataTable" >
<thead>
<tr>
<th>Sl. No</th>
<th>Restaurant Name</th>
</tr>
</thead>
<tbody id="detailsstockid">
<tr dir-paginate="cus in ($parent.labelResults=(listOfCustomerData | filter:searchProduct.rest_name:startsWith | orderBy:'rest_name')) | itemsPerPage:5 track by $index" current-page="currentPage">
<td>{{itemsPerPage *(currentPage-1)+$index+1}}</td>
<td>{{cus.rest_name}}</td>
</tr>
</tbody>
</table>
控制器端代码如下。
$scope.startsWith = function (actual, expected) {
//console.log('hello',actual);
var lowerStr = (actual + "").toLowerCase();
return lowerStr.indexOf(expected.toLowerCase()) === 0;
}
在这里,我有很多餐厅的名字,如Anjum,A&P Chinese Food Express,Bookers BBQ & Crab Shack,Butcher And The Baker, Cactus Club Stephen Avenue,Cactus Club - Macleod Trail
。在这里,当用户只在搜索框内键入a
时,名称以a
开始的名称应该过滤,但不会发生这种情况。所有数据都在2/3字母后显示过滤程序正在工作。在这里,我需要当用户输入第一个字母时,与该搜索字母相关的名称将过滤。请帮助我。
给予minimum length
到输入
即,ng-minlength = 1
<input class="form-control" placeholder="Type Restaurant Name" name="q"
type="text" ng-model="searchProduct.rest_name" ng-minlength="1">
不,它不工作 – satya
下面的链接可以帮助你。 它似乎与你试图达到的一样。 Angular filter match by character?
在上面的链接中,他们说应用自定义过滤器使用单个字符(第一个字母)调用angularjs。
由于单字母flitering发生在angularjs,但它过滤 像字符“S” 它也占用“三明治”和“面包”,虽然“面包”不是有效的项目。
Angular的过滤器表达式不会执行starts with
。它做了一个contains
。通过您提供的示例餐厅名称,在过滤器中输入'a'将不会过滤掉任何名称。最简单的办法就是在你的控制器增加一个功能:
var app = angular.module('app', []);
app.controller('myCtrl', function($scope) {
$scope.listOfCustomerData = [{
rest_name: "Anjum"
}, {
rest_name: "A&P Chinese Food Express"
}, {
rest_name: "Bookers BBQ & Crab Shack"
}, {
rest_name: "Butcher And The Baker"
}, {
rest_name: "Cactus Club Stephen Avenue"
}, {
rest_name: "Cactus Club - Macleod Trail"
}];
$scope.startsWith = function (actual, expected) {
var lowerStr = (actual + "").toLowerCase();
return lowerStr.indexOf(expected.toLowerCase()) === 0;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
<div class="input-group" style="margin-bottom:10px; width:300px;">
<input class="form-control" placeholder="Type Restaurant Name" name="q" type="text" ng-model="searchProduct.rest_name">
</div>
<table class="table table-bordered table-striped table-hover" id="dataTable">
<thead>
<tr>
<th>Sl. No</th>
<th>Restaurant Name</th>
</tr>
</thead>
<tbody id="detailsstockid">
<tr ng-repeat="cus in ($parent.labelResults=(listOfCustomerData | filter:searchProduct.rest_name:startsWith | orderBy:'rest_name')) track by $index">
<td>{{$index+1}}</td>
<td>{{cus.rest_name}}</td>
</tr>
</tbody>
</table>
</div>
对于功能,我在我的代码删除的指令。您应该能够添加startsWith
函数并添加过滤器。
我认为你要找的是** typeahead **。有很多解决方案(我之前测试过的一个是来自** Bootstrap **库:https://github.com/bassjobsen/Bootstrap-3-Typeahead。 – FDavidov
@FDavidov:我需要过滤一些数据从表格中输入后在搜索框中输入字母。在这里我使用的是Angular.js.I,我不确定它是否可以工作。您是否有任何演示代码? – satya
对不起,但没有演示代码。 。我建议你使用谷歌** Bootstrap typeahead **。你会看到大量的演示和示例代码。 – FDavidov