2016-04-19 3 views
0

これは、テキストボックスと結果フィルタにデータを書き込むサンプルコードですが、ボタンをクリックするとデータをフィルタリングできますか?角度:ボタンクリックで検索を実行する方法

<div ng-app="myApp" ng-controller="MyController"> 
<label>Field: 
    <select ng-model="selectedFieldName"> 
     <option value="">--Select Account--</option> 
      <option ng-repeat="(fieldname,fieldvalue) in customer[0]" ng-value="fieldname | uppercase">{{fieldname | uppercase}}</option> 
    </select> 
</label> 

<label>data: <input ng-model="searchText"></label> 
    <table class="table table-striped table-bordered"> 
     <tr> 
      <td>ID</td> 
      <td>First Name</td> 
      <td>Last Name</td> 
      <td>Salary</td> 
      <td>Date of Birth</td> 
      <td>City</td> 
      <td>Phone</td> 
     </tr> 
     <tr ng-repeat="item in customer | filter:SearchList "> 
     <!-- orderBy:'$index':false --> 
      <td>{{ item.id }}</td> 
      <td>{{ item.firstname }}</td> 
      <td>{{ item.lastname }}</td> 
      <td>{{ item.salary }}</td> 
      <td>{{ item.dob }}</td> 
      <td>{{ item.city }}</td> 
      <td>{{ item.phone }}</td> 
     </tr> 
    </table> 
</div> 

;var myApp = angular.module('myApp', []); 

myApp.controller('MyController', function MyController($scope) { 

    $scope.selectedFieldName=''; 
    $scope.searchText=''; 

     $scope.SearchList = function(row) { 

    if ($scope.selectedFieldName && $scope.searchText) { 
     var propVal = row[$scope.selectedFieldName.toLowerCase()]+ ''; 
     if (propVal) { 
     return propVal.toUpperCase().indexOf($scope.searchText.toUpperCase()) > -1; 
     } else { 
     return false; 
     } 
    } 
    return true;  
    }; 

    $scope.customer = [ 
     { 
      'id': 1, 
      'firstname': 'Tridip', 
      'lastname': 'Bhattacharjee', 
      'salary' : 15000, 
      'dob': '05/09/2013', 
      'city': 'kolkata', 
      'phone': '033 2589 7415' 
     }, 
     { 
      'id': 2, 
      'firstname': 'Arijit', 
      'lastname': 'Banerjee', 
      'salary' : 25000, 
      'dob': '01/09/2010', 
      'city': 'Bihar', 
      'phone': '033 2589 9999' 
     }, 
     { 
      'id': 3, 
      'firstname': 'Dibyendu', 
      'lastname': 'Saha', 
      'salary' : 20000, 
      'dob': '06/09/2011', 
      'city': 'Rachi', 
      'phone': '033 2589 3333' 
     }, 
     { 
      'id': 4, 
      'firstname': 'Bisu', 
      'lastname': 'Das', 
      'salary' : 5000, 
      'dob': '05/01/2009', 
      'city': 'Silchar', 
      'phone': '033 2589 2222' 
     }, 
     { 
      'id': 5, 
      'firstname': 'Soumyajit', 
      'lastname': 'Kar', 
      'salary' : 12000, 
      'dob': '09/08/2011', 
      'city': 'kanpur', 
      'phone': '033 3333 1894' 
     } 
    ]; 
}) 

私のコードを見て、私は一つのボタンを追加した場合、ユーザは検索用テキストボックスに書き込みデータの後にボタンをクリックしたときにどのように私は、カスタムフィルタを引き起こす可能性が教えてください。ガイドラインを探しています。ありがとう

+0

ちょっと誰もが私の目標を達成するための方法を提案しています。私の既存のコードを見て、それを修正する方法を教えてください –

+0

私は@Jeffreyの答えに疑念があります.....私の目標を達成するための提案を探しています。ありがとう –

答えて

3

クリックするだけで簡単にフィルタオブジェクトを作成できます。お使いのコントローラで

<input ng-model="searchText"></label> 
<button ng-click="submitFilter()" class="search-button">Submit</button> 

、その後:

$scope.submitFilter(){ 
    $scope.SearchList = $scope.searchText; 
} 
+0

はい私はしようとすると知っている........ありがとう –

+0

いいね。それが動作しない場合、私は助けにjsfiddleを振るしようとします。 –

+0

なぜSearchList関数にプロパティとしてアクセスしていますか?通常、このようにSearchList()のような関数を呼び出します。 –

関連する問題