कोणीय में ng-विकल्पों के साथ चयन को फ़िल्टर करने के लिए कैसे करें?

मैंने एक कोणीय ऐप की निम्नलिखित सबूत-अवधारणा लिखी है जो किसी व्यक्ति को अमेरिका के राष्ट्रपति के लिए वोट देने की अनुमति देती है।कोणीय में ng-विकल्पों के साथ चयन को फ़िल्टर करने के लिए कैसे करें?

<!DOCTYPE html> 
<html ng-app="ElectionApp""> 
<head> 
    <title></title> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script> 
    <script> 
     var ElectionApp = angular.module("ElectionApp", []); 
     var ElectionController = ElectionApp.controller("ElectionController", [function() { 
      // Pretend that this data came from an outside data-source. 
      this.candidates = { 
       "14837ac3-5c45-4e07-8f12-5771f417ca4c": { 
        name: "Alice", 
        gender: "female" 
       },"333eb217-c8d1-4b94-91a4-22a3770bbb22": { 
        name: "Bob", 
        gender: "male" 
       } 
      }; 
      this.vote = function() { 
       // TODO: Record the user's vote. 
      }; 
     }]); 
    </script> 
</head> 
<body ng-controller="ElectionController as ctrl"> 
    Who would you like to elect President? <br /> 
    <select 
     ng-model="ctrl.selection" 
     ng-options="person as person.name for (id, person) in ctrl.candidates | filter{gender:'female'}"> 
    </select> 
    <input type="button" value="Vote!" ng-submit="ctrl.vote();" /> 

    <h2>Candidate Profiles</h2>  
    <div ng-repeat="candidate in ctrl.candidates"> 
     {{candidate.name}}, {{candidate.gender}} 
    </div> 
</body> 
</html>

मेरे मतदान एप्लिकेशन प्रत्येक उम्मीदवार है, जो इस मामले में, उम्मीदवार का नाम और लिंग के होते हैं के लिए एक प्रोफ़ाइल के साथ उम्मीदवारों नामों की एक सूची प्रदर्शित करता है।

इस प्रश्न के प्रयोजन के लिए, कृपया दिखाएं कि उम्मीदवारों का रोस्टर दूरस्थ डेटा स्रोत से प्राप्त किया गया है, लेकिन उदाहरण के समान प्रारूप का पालन करेगा।

मान लीजिए कि चुनाव होने से कुछ ही समय पहले, एक संवैधानिक संशोधन पारित किया जा रहा है कि अगले अमेरिकी राष्ट्रपति महिला होनी चाहिए। मान लीजिए कि डेटा स्रोत को चुनाव के लिए समय में अपडेट नहीं किया जा सकता है, और मालिक ने मुझसे कहा, "मैंने सुना है कि कोणीय के साथ, आप मनमाने ढंग से चुन सकते हैं कि डेटा स्रोत से कौन से आइटम फ़िल्टर का उपयोग कर फ़ॉर्म पर दिखाई देते हैं। इसे बनाएं हो! "

कुछ उदाहरणों के साथ-साथ मैंने ऑनलाइन देखा है, मैंने उपरोक्त कोड लिखा है, लेकिन यह अब किसी भी उम्मीदवार को प्रदर्शित नहीं करता है। मैंने गलत क्या किया?

मैं कोणीय फ़िल्टर का उपयोग कर चयन सूची में विकल्पों को कैसे फ़िल्टर कर सकता हूं?

स्रोत

2015-10-22 Daniel Allen Langdon

गायब हो रहा है: फ़िल्टर के बाद – Vince

अधिक शोध करने के बाद, ऐसा लगता है कि 2 साल पहले एक ही सवाल पूछा गया था: http://stackoverflow.com/questions/14788652। जवाब यह है कि कोणीय ऐसा नहीं करता है, लेकिन मुझे लगता है कि कुछ उचित तरीका होना चाहिए। –

"_ मैंने सुना है कि कोणीय के साथ, आप मनमाने ढंग से चुन सकते हैं कि डेटा स्रोत से कौन से आइटम फ़िल्टर का उपयोग कर फ़ॉर्म पर दिखाई देते हैं। इसे करें! _" ठीक है अगर आप 'ng-options' के बजाय 'ng-repeat' का उपयोग करते हैं' अपने विकल्पों को प्रस्तुत करने के लिए जो निश्चित रूप से सच है। – ryanyuyu

filter केवल सरणी पर काम कर सकता है।

ElectionApp.filter('females', [ function() { 
    return function (object) { 
     var array = []; 
     angular.forEach(object, function (person) { 
      if (person.gender == 'female') 
       array.push(person); 
     }); 
     return array; 
    }; 
}]);

और फिर

ng-options="name as person.name for (id, person) in ctrl.candidates | females">

स्रोत

2015-10-22 21:50:31 wero

इस और अन्य उत्तरों से निर्णय लेने के बाद, मैंने अपने कोड को फिर से काम करना चुना है ताकि चयन बॉक्स एनजी विकल्पों के लिए सरणी का उपयोग कर सकें। –

फ़िल्टर फ़िल्टर के बाद आप बस ":" भूल गए।

<select 
    ng-model="ctrl.selection" 
    ng-options="person as person.name for person in ctrl.candidates | filter:{gender:'female'}"> 
</select>

स्रोत

2015-10-22 21:22:53

अभी भी –

काम नहीं कर रहा है यदि आप केवल व्यक्ति द्वारा (आईडी, व्यक्ति) को प्रतिस्थापित करते हैं तो क्या होगा? मैं अपनी प्रतिक्रिया संपादित करूंगा ... –

पहली बार आपके समाधान का प्रयास करते समय मुझे मिली त्रुटि "सरणी नहीं" कहती है।जब मैं अपने शब्दकोश को सरणी के साथ बदलता हूं, तो ऐसा लगता है, लेकिन मैंने सोचा होगा कि फ़िल्टरिंग का यह प्रकार मूल कार्यक्षमता होगी जो शब्दकोश-शैली वस्तुओं के साथ भी काम करना चाहिए। –

थोड़ा बारे में देर से हो सकता है, लेकिन जानकारी की तलाश में दूसरों के लिए मैं इस का उपयोग कर रहा:

लेकिन यदि आप कस्टम फ़िल्टर बना सकते हैं।

$scope.deliveryAddresses = data;

कहाँ डेटा जटिल Json आईडी, नाम और शहर से $ http.get

मेरी कोणीय नियंत्रक में WebAPI से प्राप्त मैं अपने HTML पृष्ठ में यह उपयोग कर रहा हूँ निम्नलिखित स्निपेट

ng-options="address.name for address in deliveryAddresses | filter:{name:search} track by address.id

साथ है

जहां खोज टेक्स्टबॉक्स का संदर्भ है। सरल और कुशल।

उम्मीद है कि यह किसी की मदद करेगा।

स्रोत

2016-01-29 14:03:53 Han

ओह मैन .. मैं इस जवाब को 3 दिनों की तरह ढूंढ रहा था: डी लेकिन मैं गलत सवाल पूछ रहा था :) यह वास्तव में मेरे कोणीय को सरल बनाता है .. स्पष्ट रूप से मैं एक नोब हूं लेकिन कम से कम मैं अपना कोड दोबारा कर सकता हूं और इससे बनाता है यह बहुत आसान और क्लीनर sooo! धन्यवाद! : डी – ppumkin

कोणीय में ng-विकल्पों के साथ चयन को फ़िल्टर करने के लिए कैसे करें?

उत्तर

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