2013-03-25 18 views
113

In Angular, ho in ambito un oggetto che restituisce molti oggetti. Ognuno ha un ID (questo è memorizzato in un file flat in modo che nessun DB, e mi sembra di non essere in grado di utente ng-resource)In Angular, ho bisogno di cercare oggetti in un array

Nel mio controller:

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

A mio avviso ho ulteriori informazioni su il pesce nascosto di default con lo ng-show in più, ma quando faccio clic sulla scheda mostra più semplice, vorrei chiamare la funzione showdetails(fish.fish_id). mia funzione sarebbe simile:

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

Ora in vista del più dettagli si presenta. Tuttavia dopo aver cercato nella documentazione non riesco a capire come cercare l'array fish.

Quindi, come interrogare la matrice? E in console come faccio a chiamare il debugger in modo da avere l'oggetto $scope con cui giocare?

risposta

95

So se questo può aiutarti un po '.

Ecco qualcosa che ho provato a simulare per te.

Checkout la jsFiddle;)

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

creato un filtro che si può anche usare in 'ng-repeat'

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

Uso controller:

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

Se ci sono delle domande fammelo sapere.

+0

Come Im nuovo a angolare e javascript, non sto ricevendo il significato di '+' in "se (+ ingresso [i] .id == + id) {" dichiarazione , puoi condividere i tuoi pensieri per favore. – Harshavardhan

+0

Soluzione perfetta !! –

+1

Penso che "+ input [i] .id == + id" assicuri che stai confrontando i numeri. Quindi puoi passare 1 o "1" al filtro $ e si comporterebbe esattamente nello stesso modo. Sto utilizzando ID alfanumerici, quindi l'ho modificato in "input [i] .id === id" –

13

Una soluzione sporca e semplice potrebbe sembrare

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

Perché questa è una soluzione _dirty_? – Trialcoder

+5

la mia ipotesi sarebbe perché potrebbero esserci, ad esempio, un miliardo di record di pesce e li stiamo solo analizzando uno ad uno – RedactedProfile

+6

Ci saranno ancora più record in altre lingue. Voglio dire, c'è un sacco di pesci nel C++. (Oh, stai zitto .. Andrò a votarmi ... !!) –

210

È possibile utilizzare il servizio di filtro $ esistente. Ho aggiornato il violino sopra 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'; 
    } 
} 

documentazione angolare è qui http://docs.angularjs.org/api/ng.filter:filter

+4

Ofcourse - molto più facile che riscriverlo di nuovo. –

+2

molto utile - Mentre imparo l'angolare mi sto rendendo conto che devo smettere di pensare alle funzioni di jQuery prima (stavo cercando di ottenere $ .grep per farlo) - piuttosto usando questo servizio filtro $ era proprio quello di cui avevo bisogno! – Bobby

+2

Risposta migliore in quanto non implica la scrittura di filtri personalizzati. – stevenw00

22

Per aggiungere a @ di migontech risposta e anche il suo indirizzo il suo commento che si potrebbe "probabilmente renderlo più generico", ecco un modo per farlo esso. Il sotto vi permetterà di effettuare ricerche per qualsiasi proprietà:

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

La chiamata a filtrare sarebbe poi diventato:

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

nota, ho tolto l'operatore unario (+) per consentire per le partite basati su stringhe ...

+0

considerando che la documentazione afferma che questo è l'unico caso d'uso per ng-init, direi che questo è sicuramente il modo angolare per farlo. – bluehallu

+0

Esempio molto facile da capire e molto utile – rainabba

7

vostre soluzioni sono corretti ma non necessaria complicato.È possibile utilizzare la funzione di filtro javascript pura . Questo è il tuo modello:

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

E questa è la vostra funzione:

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

È possibile anche usare l'espressione:

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

più su questa funzione: LINK

4

visto questo thread ma volevo cercare gli ID che non corrispondevano alla mia ricerca. Codice per farlo:

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

Questo ha funzionato per me. Semplice, lucido, facile da testare. Grazie! –

Problemi correlati