कोणीय में, मुझे एक सरणी में वस्तुओं को खोजने की आवश्यकता है


114

कोणीय में, मेरे पास एक ऑब्जेक्ट है जो बहुत सारी वस्तुओं को लौटाता है। प्रत्येक के पास एक आईडी है (यह एक फ्लैट फ़ाइल में संग्रहीत है, इसलिए डीबी नहीं है, और मुझे लगता है कि उपयोगकर्ता सक्षम नहीं है ng-resource)

मेरे नियंत्रक में:

$scope.fish = [
    {category:'freshwater', id:'1', name: 'trout', more:'false'},
    {category:'freshwater', id:'2', name:'bass', more:'false'}
];

मेरे विचार में मुझे डिफ़ॉल्ट के साथ छिपी मछली के बारे में अतिरिक्त जानकारी है ng-show, लेकिन जब मैं साधारण शो को अधिक टैब पर क्लिक करता हूं, तो मैं फ़ंक्शन को कॉल करना चाहूंगा showdetails(fish.fish_id)। मेरा कार्य कुछ इस तरह दिखाई देगा:

$scope.showdetails = function(fish_id) {  
    var fish = $scope.fish.get({id: fish_id});
    fish.more = true;
}

अब देखने में अधिक विवरण से पता चलता है। हालाँकि प्रलेखन के माध्यम से खोज करने के बाद मैं यह नहीं जान सकता कि उस fishसरणी को कैसे खोजा जाए ।

तो मैं सरणी को कैसे क्वेरी करूं? और कंसोल में मैं डिबगर कैसे कहूं ताकि मेरे पास $scopeखेलने के लिए वस्तु है?

जवाबों:


95

मुझे पता है कि अगर आप थोड़ी मदद कर सकते हैं।

यहाँ कुछ मैं तुम्हारे लिए अनुकरण करने की कोशिश की है।

चेकआउट jsFiddle;)

http://jsfiddle.net/migontech/gbW8Z/5/

एक फ़िल्टर बनाया जिसे आप 'एनजी-रिपीट' में भी उपयोग कर सकते हैं

app.filter('getById', function() {
  return function(input, id) {
    var i=0, len=input.length;
    for (; i<len; i++) {
      if (+input[i].id == +id) {
        return input[i];
      }
    }
    return null;
  }
});

नियंत्रक में उपयोग:

app.controller('SomeController', ['$scope', '$filter', function($scope, $filter) {
     $scope.fish = [{category:'freshwater', id:'1', name: 'trout', more:'false'},  {category:'freshwater', id:'2', name:'bass', more:'false'}]

     $scope.showdetails = function(fish_id){
         var found = $filter('getById')($scope.fish, fish_id);
         console.log(found);
         $scope.selected = JSON.stringify(found);
     }
}]);

अगर कोई सवाल हो तो मुझे बताएं।


Im के रूप में कोणीय और जावास्क्रिप्ट के लिए नया, मुझे "+ 'का अर्थ" अगर (+ इनपुट [i] .id == + id) {"कथन में नहीं मिल रहा है, तो क्या आप अपने विचार साझा कर सकते हैं।
हर्षवर्धन

सही समाधान !!
अनिल कुमार राम

1
मुझे लगता है कि "+ इनपुट [i] .id == + आईडी" सुनिश्चित करता है कि आप संख्याओं की तुलना कर रहे हैं। तो आप $ फ़िल्टर के लिए 1 या '1' पास कर सकते हैं और यह ठीक उसी तरह का व्यवहार करेगा। मैं अल्फ़ान्यूमेरिक आइडीएस का उपयोग कर रहा हूं, इसलिए मैंने इसे "इनपुट [i] .id === आईडी" में बदल दिया
एक्सल जेहेन

211

आप मौजूदा $ फ़िल्टर सेवा का उपयोग कर सकते हैं। मैंने http://jsfiddle.net/gbW8Z/12/ के ऊपर फिडेल अपडेट किया

 $scope.showdetails = function(fish_id) {
     var found = $filter('filter')($scope.fish, {id: fish_id}, true);
     if (found.length) {
         $scope.selected = JSON.stringify(found[0]);
     } else {
         $scope.selected = 'Not found';
     }
 }

कोणीय प्रलेखन यहाँ http://docs.angularjs.org/api/ng.filter:filter है


2
बहुत उपयोगी है - जैसा कि मुझे पता है कि कोणीय मैं सीख रहा हूं कि मुझे पहले jQuery फ़ंक्शंस को रोकने की ज़रूरत है (यह करने के लिए $ .grep प्राप्त करने की कोशिश कर रहा था) - बल्कि इस $ फ़िल्टर सेवा का उपयोग करना बस वही था जो मुझे चाहिए था!
बॉबी

2
बेहतर जवाब, क्योंकि इसमें आपके अपने फ़िल्टर लिखना शामिल नहीं है।
स्टीवनवॉच

क्या आप विवरण जोड़ सकते हैं कि क्या $scope.selected/ शामिल है। चयनित मैं पाया गया पर एक त्वरित खोज कर रहा हूँ ng-selected/ चुना गया If the expression is truthy, then special attribute "selected" will be set on the element:। क्या यह वही है? आपके उदाहरण में यह क्या करता है? धन्यवाद
surfmuggle

1
बहुत बढ़िया !। सरल बनाता है। धन्यवाद
भरत

2
$ फ़िल्टर सेवा को अपने नियंत्रक में जोड़ना न भूलें। यानी: app.controller ('mainController', ['$ फ़िल्टर', फ़ंक्शन ($ फ़िल्टर) {// $ फ़िल्टर अब उपयोग किया जा सकता है।}]);
लुकास रेपे वेलैंडर

22

@ Migontech के जवाब में जोड़ने के लिए और साथ ही उनकी टिप्पणी को भी संबोधित किया कि आप "शायद इसे और अधिक सामान्य बना सकते हैं", यहाँ यह करने का एक तरीका है। नीचे आप किसी भी संपत्ति द्वारा खोज करने की अनुमति देंगे:

.filter('getByProperty', function() {
    return function(propertyName, propertyValue, collection) {
        var i=0, len=collection.length;
        for (; i<len; i++) {
            if (collection[i][propertyName] == +propertyValue) {
                return collection[i];
            }
        }
        return null;
    }
});

फ़िल्टर करने के लिए कॉल तब बनेगा:

var found = $filter('getByProperty')('id', fish_id, $scope.fish);

ध्यान दें, मैंने स्ट्रिंग-आधारित मैचों की अनुमति देने के लिए यूनिरी (+) ऑपरेटर को हटा दिया ...


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

उदाहरण को समझना बहुत आसान है और बहुत ही उपयोगी है
रेनबा

13

एक गंदा और आसान समाधान जैसा दिख सकता है

$scope.showdetails = function(fish_id) {
    angular.forEach($scope.fish, function(fish, key) {
        fish.more = fish.id == fish_id;
    });
};

5
यह एक गंदा समाधान क्यों है ?
ट्रायलकोडर

5
मेरा अनुमान है क्योंकि वहाँ हो सकता है, जैसे, एक अरब मछली रिकॉर्ड और हम सिर्फ एक
RedactedProfile

6
अन्य भाषाओं में और भी अधिक रिकॉर्ड होंगे। मेरा मतलब है, C ++ में बहुत सारी मछलियाँ हैं। (ओह चुप रहो .. मैं जाऊंगा और अपने आप को वोट दूंगा .. !!)
माइक गल्डहिल


7

आपके समाधान सही हैं लेकिन अनावश्यक जटिल हैं। आप शुद्ध जावास्क्रिप्ट फ़िल्टर फ़ंक्शन का उपयोग कर सकते हैं । यह आपका मॉडल है:

     $scope.fishes = [{category:'freshwater', id:'1', name: 'trout', more:'false'},  {category:'freshwater', id:'2', name:'bass', more:'false'}];

और यह आपका कार्य है:

     $scope.showdetails = function(fish_id){
         var found = $scope.fishes.filter({id : fish_id});
         return found;
     };

आप अभिव्यक्ति का उपयोग भी कर सकते हैं:

     $scope.showdetails = function(fish_id){
         var found = $scope.fishes.filter(function(fish){ return fish.id === fish_id });
         return found;
     };

इस फ़ंक्शन के बारे में अधिक जानकारी: लिंक


4

इस धागे को देखा, लेकिन मैं उन आईडी की खोज करना चाहता था जो मेरी खोज से मेल नहीं खातीं। कोड ऐसा करने के लिए:

found = $filter('filter')($scope.fish, {id: '!fish_id'}, false);

इसने मेरे लिए काम किया। सरल, चालाक, परीक्षण करने में आसान। धन्यवाद!
कल्पेश पांचाल 15
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.