用angularjs自動更新總onkeyup

我有一個web api用戶列表，我向用戶提供了一個搜索框以進行過濾以使搜索變得容易。在表格的頂部我也提供了api返回的用戶總數。用angularjs自動更新總onkeyup

我有什麼做的，當用戶開始輸入，並正在篩選結果，顯示的總數也應該更新

<div class="col-sm-9"> 
<table width="100%" border="0" cellspacing="2" cellpadding="2" class="table"> 
    <tr> 
    <td width="6%"><strong>Filter By</strong></td> 
    <td width="94%">    <select ng-model="queryBy"> 
        <option value="$"></option> 
        <option value="Customer_Name">Name</option> 
        <option value="Address">Adddress</option> 
        <option value="Region">Region</option> 
        <option value="District">District</option> 
       </select> </td> 
    </tr> 
    <tr> 
    <td><strong>Search</strong></td> 
    <td>  <div class="form-group"> 
     <input type="text" class="form-control" id="search" placeholder="Search Customers" ng-model="query[queryBy]"/> 
     </div></td> 
    </tr> 
    <tr> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    </tr> 
</table> 


<img src="img/loader.gif" width="100" height="13" border="0" /> 
</div> 
<table class="table table-striped table-hover"> 
    <tr> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td>Total Customers: {{users_list.length}}</td> 
    </tr> 
    <tr class="success"> 
    <td><strong><a style="color: black; text-decoration: none" href="#/home" ng-click="clikme('Customer_Name')">Customer Name</a></strong></td> 
    <td><strong>Phone Number</strong></td> 
    <td><strong>Address</strong></td> 
    </tr> 
    <tr ng-repeat="item in users_list | filter: query "> 
    <td>{{item.Customer_Name}}</td> 
    <td>{{item.Phone_Number}}</td> 
    <td>{{item.Address}}</td> 
    </tr> 
    </table> 

</div>

.controller('app_users_ctrl',function($scope,$http,$location){ 

    $scope.query = {}; 
    $scope.queryBy = '$'; 

    $http.post('http://websource.com/calls/app_users.php').success(function(data){ 
    $scope.users_list=data 
    //console.log(JSON.stringify(data)); 
    $scope.loading=false; 
     }) 

    $scope.clikme= function(field){ 
    $scope.myvar= order ? '-' + field : '+' + field; 
     order=!order; 
    } 

    })

來源

2017-08-12 user6579134

呦需要使用lenght是對於過濾結果，請試試這個。

變更{{users_list.length}}對於{{ (users_list | filter: query).length }}

來源

2017-08-12 15:47:42

用angularjs自動更新總onkeyup

回答

相關問題