AngularJS benutzerdefinierte Suchdaten durch Schreiben von benutzerdefinierten Filter

Question

Angenommen, ich zeige unten Daten im Tabellenformat mit ng-Wiederholung.

<div class="form-group"> 
      <label >Search</label> 
      <input type="text" ng-model="search" class="form-control" placeholder="Search"> 
     </div> 

<table class="table table-striped table-hover"> 
          <thead> 
           <tr> 
            <th>Id</th> 
            <th>First Name</th> 
            <th>Last Name</th> 
            <th>Hobby</th> 
           </tr> 
          </thead> 
          <tbody> 
           <tr ng-repeat="user in users|filter:search"> 
            <td>{{user.id}}</td> 
            <td>{{user.first_name}}</td> 
            <td>{{user.last_name}}</td> 
            <td>{{user.hobby}}</td> 
           </tr> 
          </tbody> 
         </table> 

oben Code genommen von http://code.ciphertrick.com/2015/06/01/search-sort-and-pagination-ngrepeat-angularjs/

so auf diese Weise wir suchen können. was auch immer Benutzer in Such-Textfeld schreiben, dass Daten basierend auf diesem Filter generiert werden, aber meine Anforderung ist etwas anders.

Ich habe eine Dropdown-Liste, in der alle Felder Name wird ausgefüllt und Benutzer wird Felder Name auswählen und Wert in Textfeld und Daten werden auf diesem bestimmten Feldnamen nicht gesamte Ergebnismenge gesucht werden. Wie könnte ich es erreichen?

auf der Suche nach Anleitung.

Answer 1

So etwas, angepasst von der Angular Docs für Filter wird funktionieren.

HTML

<label>Search In: <select ng-model="ctrl.searchField"> 
    <option value="_id">ID</option> 
    <option value="name">Name</option> 
    <option value="phone">Phone #</option> 
    <option value="dob">Birthday</option> 
</select> 

<label>Search For: <input ng-model="ctrl.searchText"></label> 
<table id="searchTextResults"> 
    <tr> 
    <th>ID</th> 
    <th>Name</th> 
    <th>Phone</th> 
    <th>Birthday</th> 
    </tr> 
    <tr ng-repeat="friend in ctrl.friends | filter:ctrl.filterList"> 
    <td>{{friend._id}}</td> 
    <td>{{friend.name}}</td> 
    <td>{{friend.phone}}</td> 
    <th>{{friend.dob.toDateString()}}</th> 
    </tr> 
</table> 

JavaScript

angular.module("filterApp", []).controller("filterDemo", filterDemo) 

function filterDemo() { 
    let vm = this; 
    vm.searchField = "" 
    vm.searchText = "" 
    vm.friends = [{ 
    _id: 12323, 
    name: 'Will', 
    phone: '555-1276', 
    dob: new Date(1990,00,20) 
    }, { 
    _id: 34645764576, 
    name: 'Mike', 
    phone: '555-4321', 
    dob: new Date(1967,01,02) 
    }, { 
    _id: 6565656795, 
    name: 'Toni', 
    phone: '555-5678', 
    dob: new Date(1967,05,21) 
    }, { 
    _id: 2565656, 
    name: 'Leilani', 
    phone: '808-BIG-WAVE', 
    dob: new Date(2007,01,01) 
    }, { 
    _id: 67567567, 
    name: 'Julie', 
    phone: '555-8765', 
    dob: new Date(1991,12,01) 
    }, { 
    _id: 477676767, 
    name: 'Juliette', 
    phone: '555-5678', 
    dob: new Date(1991,12,01) 
    }, { 
    _id: 2565656, 
    name: 'Mary', 
    phone: '800-BIG-MARY', 
    dob: new Date(1991,12,01) 
    }] 

    vm.filterList = filterList 

    function filterList(row) { 
    if (vm.searchField && vm.searchText) { 
     let propVal = row[vm.searchField] 
     if (propVal) { 
      return  propVal.toString().toUpperCase().indexOf(vm.searchText.toUpperCase()) > -1; 
    } else { 
     return false; 
     } 
    } 
    return true; 
    }; 
} 

Und hier ist ein funktionierender Codepen: http://codepen.io/anon/pen/yOjdJV?editors=1010

Answer 2

können Sie es so machen. vollständiger Code hier ist

<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' 
     } 
    ]; 




}) 

https://jsfiddle.net/tridip/rnoo3bqc/8/