过滤第一个字母在AngularJS中不起作用

Question

上次我在这里发布了我的问题，如何过滤数据中的第一个字母，有人帮助我如何做到这一点。但是当我尝试将它添加到我的项目中时，我不知道我将startsWithA过滤器函数放在过滤数据的ng-repeat中。知道如何解决它吗？再次感谢。

＆＃13;

＆＃13;

<script>
	var app = angular.module('app', ['ui.bootstrap']);
	
    $scope.student = [{
			        name: 'Andrew'        
			    }, {
			        name: 'Butler'
			    }, {
			        name: 'Cameron'
			    }, {
			        name: 'Delo'
			    },
                   {
			        name: 'Emman'
			    },
                   {
			        name: 'Ferbs'
			    }];
	
	app.filter('startFrom', function()
	{	
		 return function(input, start) 
		 {
		 	if(input) 
			{
				 start = +start; //parse to int
		 		 return input.slice(start);
		 	}
		 	return [];
		 }
	});

	app.controller('customersCrtl', function ($scope, $timeout)
    {  
		
				 $scope.list = student; 
				 $scope.currentPage = 1; //current page
				 $scope.entryLimit = 10; //max no of items to display in a page
				 $scope.filteredItems = $scope.list.length; //Initially for no filter
				 $scope.totalItems = $scope.list.length;

			 

			 
			 $scope.setPage = function(pageNo) 
			 {
				 $scope.currentPage = pageNo;
			 };
			 
			 $scope.filter = function() 
			 {
				 $timeout(function() 
				 {
					 $scope.filteredItems = $scope.filtered.length;
				 }, 10);

				
			 };
			 
			 
			 $scope.sort_by = function(predicate) 
			 {
				 $scope.predicate = predicate;
				 $scope.reverse = !$scope.reverse;
			 };	

			 
		
	});
	
	app.filter('startsWithA', function () {
	    return function (letter,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.name.substring(0, 1))) {
	                filtered.push(item);
	            }
	        }
	        return filtered;
	    };
	});
	
</script>

＆＃13;

</style>
<script src="//code.angularjs.org/1.3.0-beta.7/angular.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.js"></script>
<style>

＆＃13;

<div class="container" ng-controller="customersCrtl">
    <div class="row">
    <div class="col-12">
		<h2 id="titleHead"><center>Student List</center></h2>
		</div>
        <div class="option-panel">
         	<div class="col-sm-3 col-md-3 pull-right">
            	<form class="navbar-form">
               		 <div class="input-group">
                    	<input type="text" ng-model="search" ng-click="filter()" placeholder="Search student" class="form-control" placeholder="Search" name="search">
               		 </div>
           		 </form>
        	</div>     	   
        </div>
		 <div class="nav navbar-default"> 
    		<div class="tab-panel">
       			 <nav>
       			 <ul>
          			<li class="active" name = "active"><a ng-click="letter = [AB]">A-B</a>  </li>
                   	<li class="active" name = "active"><a ng-click="letter = [CD]">C-D</a>  </li>
                   	<li class="active" name = "active"><a ng-click="letter = [EF]">E-F</a>  </li>
                   
          		
        		</ul>
        		</nav>
   		 	</div>
   		 </div>  
        <div id="no-more-tables">
            <table class="col-md-12 table-bordered table-condensed cf" ng-show="filteredItems > 0">
        		<thead class="cf">
        			<tr>
        				
        				<th><center>Name&nbsp;<a ng-click="sort_by('first_name');"></a></center></th>
        			
        			</tr>
        		</thead>      
        		<tbody color="#">       
        			<tr ng-repeat="data in filtered = (list | filter:search |orderBy : predicate :reverse) | startFrom:(currentPage-1)*entryLimit |startWithA:letter limitTo:entryLimit ">   			
        				<td data-title="Name" class="text-center">{{data.name}}</td>
    
        							    			
        			</tr> 
        		</tbody>  		       		
        	</table>
        	 <div class="col-md-12" ng-show="filteredItems == 0">
		        <div class="col-md-12">
		           <center><h4>No results found</h4></center>
		        </div>
		    </div>
		    <div class="col-md-12" ng-show="filteredItems > 0">
		       <center><div pagination="" page="currentPage" on-select-page="setPage(page)" boundary-links="true" total-items="filteredItems" items-per-page="entryLimit" class="pagination-small" previous-text="&laquo;" next-text="&raquo;"></div></center>	 
		    </div>       	
      	  </div>
      	  
</div>
        </div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

修好后：

1. customerCrtl（js） - ＆gt; customerCtrl（html）
2. startsWithA（js） - ＆gt; startWithA（html）
3. 缺少＆＃34; |＆＃34;在limitTo（html）
之前

我发现问题是你没有逃脱ng-clicks中的字母：

ng-click="letter = [AB]"

你需要：

ng-click="letter = '[AB]'"

$scope.letters始终为[null]。 [AB]评估为[null]，因为未定义$scope.AB。然后，当您startsWithA为$scope.letters时尝试使用[null]过滤器时，您永远不会返回任何已过滤的项目。

我的代码片段在下面工作了。

＆＃13;
＆＃13;
var app = angular.module('app', ['ui.bootstrap']);

var student = [{
  name: 'Andrew'
}, {
  name: 'Butler'
}, {
  name: 'Cameron'
}, {
  name: 'Delo'
}, {
  name: 'Emman'
}, {
  name: 'Ferbs'
}];

app.filter('startFrom', function() {
  return function(input, start) {
    if (input) {
      start = +start; //parse to int
      return input.slice(start);
    }
    return [];
  }
});

app.controller('customersCtrl', function($scope, $timeout) {

  $scope.list = student;
  $scope.currentPage = 1; //current page
  $scope.entryLimit = 10; //max no of items to display in a page
  $scope.filteredItems = $scope.list.length; //Initially for no filter
  $scope.totalItems = $scope.list.length;

  $scope.setPage = function(pageNo) {
    $scope.currentPage = pageNo;
  };

  $scope.filter = function() {
    $timeout(function() {
      $scope.filteredItems = $scope.filtered.length;
    }, 10);
  };


  $scope.sort_by = function(predicate) {
    $scope.predicate = predicate;
    $scope.reverse = !$scope.reverse;
  };



});

app.filter('startsWithA', function() {
  return function(items, letter) {
    console.log(items, letter)
    var filtered = [];
    var letterMatch = new RegExp(letter, 'i');
    for (var i = 0; i < items.length; i++) {
      var item = items[i];
      if (letterMatch.test(item.name.substring(0, 1))) {
        filtered.push(item);
      }
    }
    console.log(filtered);
    return filtered;
  };
});
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.js"></script>
<div ng-app="app">
  <div class="container" ng-controller="customersCtrl">
    <div class="row">
      <div class="col-12">
        <h2 id="titleHead"><center>Student List</center></h2>
      </div>
      <div class="option-panel">
        <div class="col-sm-3 col-md-3 pull-right">
          <form class="navbar-form">
            <div class="input-group">
              <input type="text" ng-model="search" ng-click="filter()" placeholder="Search student" class="form-control" placeholder="Search" name="search">
            </div>
          </form>
        </div>
      </div>
      <div class="nav navbar-default">
        <div class="tab-panel">
          <nav>
            <ul>
              <li class="active" name="active"><a ng-click="letter = '[AB]'">A-B</a> 
              </li>
              <li class="active" name="active"><a ng-click="letter = '[CD]'">C-D</a> 
              </li>
              <li class="active" name="active"><a ng-click="letter = '[EF]'">E-F</a> 
              </li>


            </ul>
          </nav>
        </div>
      </div>
      <div id="no-more-tables">
        <table class="col-md-12 table-bordered table-condensed cf" ng-show="filteredItems > 0">
          <thead class="cf">
            <tr>

              <th>
                <center>Name&nbsp;
                  <a ng-click="sort_by('first_name');"></a>
                </center>
              </th>

            </tr>
          </thead>
          <tbody color="#">
            <tr ng-repeat="data in filtered = (list | filter:search |orderBy : predicate :reverse) | startFrom:(currentPage-1)*entryLimit |startsWithA:letter |limitTo:entryLimit ">
              <td data-title="Name" class="text-center">{{data.name}}</td>
            </tr>
          </tbody>
        </table>
        <div class="col-md-12" ng-show="filteredItems == 0">
          <div class="col-md-12">
            <center>
              <h4>No results found</h4>
            </center>
          </div>
        </div>
        <div class="col-md-12" ng-show="filteredItems > 0">
          <center>
            <div pagination="" page="currentPage" on-select-page="setPage(page)" boundary-links="true" total-items="filteredItems" items-per-page="entryLimit" class="pagination-small" previous-text="&laquo;" next-text="&raquo;"></div>
          </center>
        </div>
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;