2017-08-12 5 views
0

ウェブアプリからユーザーのリストを取得しました。このユーザーは検索ボックスを使用して検索を容易にするための検索ボックスを提供しました。 テーブルの上側にも、APIによって返されたユーザーの合計数が表示されています。自動更新anglejsを使用した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> 

JS

.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; 
    } 

    }) 

答えて

0

を更新すべきですフィルタリングされた結果のためにこれを試してください。

変更{{users_list.length}}{{ (users_list | filter: query).length }}

関連する問題