Question

使用angular.js过滤器时，我收到以下错误。

错误：

TypeError: Cannot read property 'length' of undefined
    at adminCustomerViewController.js:1387
    at fn (eval at compile (angularjs.js:212), <anonymous>:4:464)
    at dirPagination.js:100
    at Object.<anonymous> (angularjs.js:115)
    at n.$digest (angularjs.js:130)
    at n.$apply (angularjs.js:133)
    at g (angularjs.js:87)
    at K (angularjs.js:91)
    at XMLHttpRequest.z.onload (angularjs.js:92)

我正在解释下面的代码。

<input class="form-control" placeholder="Type Restaurant Name" name="q" type="text" ng-model="letter">
    <tr dir-paginate="cus in ($parent.labelResults=(listOfCustomerData  | startsWithLetter:letter | 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>

我的控制器端代码如下所示。

customerView.filter('startsWithLetter', function () {
    return function (items, letter) {
        //console.log('items',items);
        var filtered = [];
        var letterMatch = new RegExp(letter, 'i');
        for (var i = 0; i < items.length; i++) {
            var item = items[i];
            if (letterMatch.test(item.rest_name.substring(0, 1))) {
                filtered.push(item);
            }
        }
        return filtered;
    };
});
customerView.controller('adminCustomerViewController',function($scope,$state,$http,$window,$timeout,Upload,focusInputField){
    $http({
        method:'GET',
        url:"php/customerInfo.php?action=disp",
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
    }).then(function successCallback(response){
        console.log('res',response.data);
        $scope.listOfCustomerData=response.data;
    },function errorCallback(response) {
    })
})

其实我在这里实现搜索功能。这里我的要求是当用户至少输入餐馆名称的第一个字母（i.e-rest_name）时，相关餐厅将从表中过滤。假设我有许多餐厅，如Anjum,A&P Chinese Food Express,Bookers BBQ & Crab Shack,Butcher And The Baker, Cactus Club Stephen Avenue,Cactus Club - Macleod Trail。当用户在搜索框中仅键入a时，名称以过滤器开头。我做了一些事但得到了上述错误。请帮助我。

Answer 1

试试这个

  <input class="form-control" placeholder="Type Restaurant Name" name="q" type="text" ng-model="letter">
    <tr dir-paginate="cus in ($parent.labelResults=(listOfCustomerData  | filter : letter )) | itemsPerPage:5 track by $index" current-page="currentPage">
     <td>{{itemsPerPage *(currentPage-1)+$index+1}}</td>
     <td>{{cus.rest_name}}</td>
    </tr>   
    </tbody>

最好使用角色中的filter作为comapred来制作自定义过滤器

Answer 2

因为您只想要那些具有相应字母的对象来输入你不需要使用Regexp。

这是一个代码片段：

＆＃13;

var app = angular.module('app', [])

  .controller('mainCtrl', function($scope) {
    $scope.countries = [  
       {  
          "name":"USA"
       },
       {  
          "name":"Japan"
       },
       {  
          "name":"France"
       },
       {  
          "name":"Canada"
       },
       {  
          "name":"China"
       }
    ];
  })

  .filter('startsWith', function() {
    return function(items, search) {
      if (!search) {
        return items;
      }
      search = search.toLowerCase();
      return items.filter(function(element) {
        return element.name.toLowerCase().substring(0, search.length).indexOf(search) != -1;
      });
    }
});

＆＃13;

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>

<body ng-controller="mainCtrl">
  <label for="letter">Filter: </label>
  <input type="text" id="letter" ng-model="letter">
  <hr>
  <table>
    <thead>
      <tr>
        <th>Name</th>
      </tr>
     </thead>
     <tbody>
      <tr ng-repeat="country in countries | startsWith: letter">
        <td ng-bind="country.name"></td>
      </tr>
     </tbody>
  </table>
</body>

</html>

＆＃13;

自定义过滤器

2 个答案: