Angular.js içinde arama filtresi,

Bu çerçevede yeniyim, dolayısıyla Angularjs uyguluyor ve web sitesinde mevcut olan eğitimleri takip ediyorum.Angular.js içinde arama filtresi,

bir örnek biz tabloda mevcut verileri arama yapabilirsiniz vardı orada, örnek aşağıdaki gibidir i iki farklı girişler yani arama kullanarak telefon arama yapabilmek duyuyorum yukarıdaki kodda İşte

<!DOCTYPE html> 
<html ng-app="SmartPhoneApp"> 
<head> 
    <title>Smart phone Angular</title>  
    <script type="text/javascript" src="D:/Rahul Shivsharan/Installers/AngularJS/angular.js"></script> 
    <script type="text/javascript"> 
     var smartPhoneApp = angular.module("SmartPhoneApp",[]); 

     smartPhoneApp.controller("phoneCtrl",function($scope){ 
      $scope.phones = [ 
       { 
        "modelName" : "LUMIA 520", 
        "companyName" : "NOKIA" 
       }, 
       { 
        "modelName" : "GALAXY S Series", 
        "companyName" : "SAMSUNG" 
       }, 
       { 
        "modelName" : "CANVAS", 
        "companyName" : "MICROMAX" 
       }, 
       { 
        "modelName" : "OPTIMUS", 
        "companyName" : "LG"       
       } 
      ]; 

     }); 
    </script> 
</head> 
<body> 
    Search by Model Name : <input ng-model="comp.modelName" /> 
    Search by Company : <input ng-model="comp.companyName" /> 
    <div ng-controller="phoneCtrl"> 
     <table ng-repeat="phone in phones | filter: comp"> 
      <tr> 
       <td>{{phone.modelName}}</td> 
       <td>{{phone.companyName}}</td> 
      </tr> 
     </table> 
    </div> 
</body> 
</html>

Model Adı ve yukarıdaki kod iyi çalışır şirket adı ile arama,

Ama seçme seçenekleri mevcut arama türünü kullanarak arama yapmak gerekirse ne,

kod tarafından

<!DOCTYPE html> 
<html ng-app="EmployeeApp"> 
<head> 
    <title>Orderring People</title>  
    <script type="text/javascript" src="D:/Rahul Shivsharan/Installers/AngularJS/angular.js"></script> 
    <script type="text/javascript"> 
     var employeeApp = angular.module("EmployeeApp",[]); 
     employeeApp.controller("empCtrl",function($scope){ 
      $scope.employees = [ 
       { 
        "name" : "Mahesh Pachangane", 
        "company" : "Syntel India Pvt. Ltd", 
        "designation" : "Associate" 
       }, 
       { 
        "name" : "Brijesh Shah", 
        "company" : "Britanica Software Ltd.", 
        "designation" : "Software Engineer" 
       }, 
       { 
        "name" : "Amit Mayekar", 
        "company" : "Apex Solutions", 
        "designation" : "Human Resource" 
       }, 
       { 
        "name" : "Ninad Parte", 
        "company" : "Man-made Solutions", 
        "designation" : "Senior Architect" 
       }, 
       { 
        "name" : "Sunil Shrivastava", 
        "company" : "IBM", 
        "designation" : "Project Lead" 
       }, 
       { 
        "name" : "Pranav Shastri", 
        "company" : "TCS", 
        "designation" : "Senior Software Engineer" 
       }, 
       { 
        "name" : "Madan Naidu", 
        "company" : "KPMG", 
        "designation" : "Senior Associate" 
       }, 
       { 
        "name" : "Amit Gangurde", 
        "company" : "Amazon", 
        "designation" : "Programe Manager" 
       } 
      ]; 
      $scope.orderProp="name";     
     }); 
    </script> 
</head> 
<body ng-controller="empCtrl">  
    <table> 
     <tr> 
      <td align="right">Search :</td> 
      <td><input ng-model="query" /></td> 
     </tr>   
     <tr> 
      <td align="right">Search By :</td> 
      <td> 
       <select ng-model="query"> 
        <option value="name">NAME</option> 
        <option value="company">COMPANY</option> 
        <option value="designation">DESIGNATION</option> 
       </select> 
      </td> 
     </tr> 
    </table> 
    <hr> 
    <div> 
     <table> 
      <tr> 
       <th>Employee Name</th> 
       <th>Company Name</th> 
       <th>Designation</th> 
      </tr> 
      <tr ng-repeat="emp in employees | filter:query"> 
       <td>{{emp.name}}</td> 
       <td>{{emp.company}}</td> 
       <td>{{emp.designation}}</td> 
      </tr> 
     </table> 
    </div> 
</body>

i elde etmek çalışıyorum görebilirsiniz Yukarıdaki kod itibaren

"Ad", "Şirket" veya "Tahsisi" ile seçim kutusunda bulunan arama çalışanı olan aşağıdaki gibi

olduğunu

ama burada yanlış gidiyorum,

ng model sorgu sağ eşleme alır vermez veya i yanlış yola yapıyorum olabilir

kodunuzu hep bir dize gönderir iken

Eğer kod

hangi kısmının i

kaynak

2013-10-25 Rahul Shivsharan

http://www.angulartutorial.net/2015/04/angular-js-basic-search-and-filter-data.html – Prashobh

Bir plunkr hazırladık. Filtrelemek için arama sorgusundaki özellikleri tanımlayabilirsiniz. Seçimde, filtrelemek istediğiniz özelliği seçin ve arama sorgusuna atayın.

http://plnkr.co/edit/XklvXtc1AZpndjLvXrh8?p=preview

kaynak

2013-10-25 10:15:35 bekite

Teşekkür kullanmış Filtre referanstır. Bu yararlı oldu :) – Miles

çok iyi, iki kez bunu desteklemek istiyorum –

Filtre tuşları belirtmek itiraz kullanımlara bakın bir örnek değişmelidir, ben bunu başarmak nasıl söyle lütfen edebilirsiniz ve bu ana sorun nedenidir.

Arama alanına "e" yazdığımı varsayalım. "Search by" seçili olmadığında, filtre her anahtar değerinde "e" yi arardı. "Ara" ile değeri seçtiğimizde, sorgu dizesi geçerli seçeneğin değeri ("isim", "şirket" veya "tanım") haline gelir ve herhangi bir sonuç olmaksızın "e" ile aynı senaryoda ilerler. Test verisinde herhangi bir eşleşme yok.

"Ara" öğesini seçmenin uygun yolu, bir sorguyu, arama sorgusuna eşit olan, seçili seçenek olarak adlandırılan tek bir tuşla çalıştırıyor olabilir. Yani, "se" ile adını kullanıcı aramaları, eğer olacak: Henüz seçilmiş bir seçenek, mülkiyet "$" adlı olmalıdır durumda

{ 
    name: "sh" 
}

, bu şekilde filtresi tüm özellikleri arasında arayacaktır.

Kodu, amaçlandığı gibi çalışmak üzere düzeltdim (link). Bunu nasıl uyguladığınız başka bir soru, ancak $ formatındaki queryFilter nesnesini tanımlayarak, istenen formattaki nesneyi döndüren getter ile gidiyorum.

.controller("empCtrl", function($scope) { 
    Object.defineProperty($scope, "queryFilter", { 
     get: function() { 
      var out = {}; 
      out[$scope.queryBy || "$"] = $scope.query; 
      return out; 
     } 
    }) 
...

<body ng-controller="empCtrl">  
    <table> 
     <tr> 
      <td align="right">Search :</td> 
      <td><input ng-model="query" /></td> 
     </tr>   
     <tr> 
      <td align="right">Search By :</td> 
      <td> 
       <select ng-model="queryBy"> 
        <option value="name">NAME</option> 
        <option value="company">COMPANY</option> 
        <option value="designation">DESIGNATION</option> 
       </select> 
      </td> 
     </tr> 
    </table> 
    <hr> 
    <div> 
     <table> 
      <tr> 
       <th>Employee Name</th> 
       <th>Company Name</th> 
       <th>Designation</th> 
      </tr> 
      <tr ng-repeat="emp in employees | filter:queryFilter"> 
       <td>{{emp.name}}</td> 
       <td>{{emp.company}}</td> 
       <td>{{emp.designation}}</td> 
      </tr> 
     </table> 
    </div> 
</body>

kaynak

2013-10-25 10:03:33

Basit ve jsfiddle esnek.

aşağıda ı

app.filter('tableSearch', function() { 
    return function (list, query, fields) { 
     if (!query) { 
      return list; 
     } 
     query = query.toLowerCase().split(' '); 
     if (!angular.isArray(fields)) { 
      fields = [fields.toString()]; 
     } 
     return list.filter(function (item) { 
      return query.every(function (needle) { 
       return fields.some(function (field) { 
        var content = item[field] != null ? item[field] : ''; 

        if (!angular.isString(content)) { 
         content = '' + content; 
        } 

        return content.toLowerCase().indexOf(needle) > -1; 
       }); 
      }); 
     }); 
    }; 
})

kaynak

2018-01-23 11:48:08

Angular.js içinde arama filtresi,

cevap

İlgili konular