使用Angular.js输入部分名称时，搜索功能不起作用

Question

我遇到问题。我使用angular.js根据Restaurant Name从我的表中搜索功能。假设有许多'餐厅名称'，并且如果用户输入任何名称的第一个字母，则在按2/3字母正确过滤之后，它不会根据需要进行过滤。让我在下面解释我的代码。

<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字母后显示过滤程序正在工作。在这里，我需要当用户输入第一个字母时，与该搜索字母相关的名称将过滤。请帮助我。

Answer 1

给予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"> 

Answer 2

下面的链接可以帮助你。 它似乎与你试图达到的一样。 Angular filter match by character?

在上面的链接中，他们说应用自定义过滤器使用单个字符（第一个字母）调用angularjs。

由于单字母flitering发生在angularjs，但它过滤 像字符“S” 它也占用“三明治”和“面包”，虽然“面包”不是有效的项目。

Answer 3

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函数并添加过滤器。