Angular.js में फ़िल्टर द्वारा फ़िल्टर,

मैं इस ढांचे के लिए नया हूं, इसलिए Angularjs का अभ्यास करना और वेबसाइट पर उपलब्ध ट्यूटोरियल्स का पालन करना।Angular.js में फ़िल्टर द्वारा फ़िल्टर,

है एक उदाहरण थे हम डेटा तालिका में मौजूद खोज सकते हैं, उदाहरण इस प्रकार है के रूप में,

<!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>

ऊपर कोड मैं दो अलग अलग आदानों यानी खोज का उपयोग कर फोन खोज करने के लिए कर रहा हूँ में

यहाँ मॉडल का नाम और कंपनी का नाम, उपरोक्त कोड ठीक चलाता द्वारा खोज,

लेकिन क्या होगा अगर मैं खोज के प्रकार का चयन करें विकल्पों में मौजूद का उपयोग करके खोज करने के लिए की जरूरत है,

कोड से इस प्रकार

<!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>

ऊपर कोड आप देख सकते हैं कि मैं प्राप्त करने के लिए कोशिश कर रहा हूँ से चयन बॉक्स में मौजूद "नाम", "कंपनी" या "पद" द्वारा खोज कर्मचारी है,

लेकिन मैं गलत यहाँ जा रहा हूँ,

एनजी मॉडल क्वेरी, सही मानचित्रण ऊपर उठाता नहीं है या मैं एक गलत तरह से कर रहा हूँ हो सकता है,

आप कृपया, मुझे बता सकते हैं मैं यह कैसे प्राप्त होगा,

जो कोड का हिस्सा मैं बदलना चाहिए

स्रोत

2013-10-25 Rahul Shivsharan

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

मैं एक plunkr बना लिया है। आप फ़िल्टर करने के लिए खोज क्वेरी पर गुणों को परिभाषित कर सकते हैं। चयन में आप उस संपत्ति का चयन करते हैं जिसे आप फ़िल्टर करना चाहते हैं और उसे खोज क्वेरी में असाइन करें।

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

स्रोत

2013-10-25 10:15:35 bekite

धन्यवाद है। यह सहायक था :) – Miles

इतना अच्छा, मैं इसे दो बार ऊपर उठाना चाहता हूं –

एक उदाहरण आप का उपयोग करता है फिल्टर कुंजी निर्दिष्ट करने के लिए वस्तु का उल्लेख, अपने कोड हमेशा एक स्ट्रिंग भेजता है, जबकि और यह मुख्य मुद्दा कारण है।

मान लीजिए कि मैंने खोज क्षेत्र में "ई" टाइप किया है। चयनित "खोज द्वारा" के बिना, फ़िल्टर प्रत्येक कुंजी मान में "ई" की खोज करेगा। जब हम "द्वारा खोज" से मूल्य का चयन करते हैं, तो क्वेरी स्ट्रिंग वर्तमान विकल्प का मान ("नाम", "कंपनी" या "पदनाम") बन जाती है, और बिना किसी परिणाम के, "ई" के रूप में उसी दृश्य में आगे बढ़ेगी, क्योंकि वहां कोई परिणाम नहीं है परीक्षण डेटा में कोई मिलान नहीं है।

"द्वारा खोज" चुनने का सही तरीका एक ऑब्जेक्ट का निर्माण करेगा जिसे एक विकल्प के रूप में चुना गया विकल्प चुना गया है, जो खोज क्वेरी के बराबर है। तो, अगर "श" के साथ नाम के लिए उपयोगकर्ता खोजों, यह हो जाएगा:

{ 
    name: "sh" 
}

मामले में जब अभी तक कोई विकल्प नहीं चुना, संपत्ति "$" नाम दिया जाना चाहिए, इस तरह से फिल्टर सभी गुण के बीच खोज करेंगे।

मैंने कोड को इच्छित (link) के रूप में काम करने के लिए कोड तय कर दिया है। आप इसे कैसे कार्यान्वित करते हैं, यह एक और सवाल है, लेकिन मैं क्वेरीफिल्टर ऑब्जेक्ट को $ स्कोप पर परिभाषित करके चला गया, गेटटर के साथ जो वांछित प्रारूप की वस्तु देता है।

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

स्रोत

2013-10-25 10:03:33

सरल और लचीला jsfiddle।

नीचे फ़िल्टर संदर्भ जो मैं का इस्तेमाल किया है

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

स्रोत

2018-01-23 11:48:08

Angular.js में फ़िल्टर द्वारा फ़िल्टर,

उत्तर

संबंधित मुद्दे