2016-01-19 17 views
7

Ho una semplice lista:Angularjs: Selezionare combinazione da un elenco

$scope.myArr = ["a_b_c","a_b_d","a_e_g","f_t_r","f_t_g","f_u_m"]; 

Da questo voglio costruire 3 <select></select>.

Il primo conterrà i primi elementi dell'array separati da _. Così ["a","a","a","f","f","f"]

Il secondo ["b","b","e","t","t","u"]

Il terzo ["c","d","g","r","g","m"]

ho costruito questi 3 matrici e ho fare valori univoci.

Ciò che mi serve è che, ad esempio, se si seleziona a nella prima selezione, il secondo mostrerà solo b,b,e.

Io in realtà voglio rispettare le combinazioni possibili dalla matrice di partenza ($scope.myArr)

Tutte le idee su come posso raggiungerlo?

http://jsfiddle.net/uxo0jue3/

+0

Avete problemi con pre-elaborazione esso? – epascarello

+0

Non sai cosa significa:/ – AshBringer

+0

[this] (http://jsfiddle.net/v0gLkkqn/) funziona, ma non puoi usare distinto, quindi probabilmente non è la soluzione che stai cercando – AntiHeadshot

risposta

6

È possibile trasferire l'array, dividere i valori e crea un oggetto livellato Semplicemente collegalo alla vista:

var myArr = ["a_b_c","a_b_d","a_e_g","f_t_r","f_t_g","f_u_m"]; 
var levels = {}; 

myArr.forEach(function(arr) { 
    var split = arr.split("_"); 
    if (!levels[split[0]]) 
     levels[split[0]] = {}; 

    if (!levels[split[0]][split[1]]) 
     levels[split[0]][split[1]] = [] 

    if (levels[split[0]][split[1]].indexOf(split[2]) === -1) 
     levels[split[0]][split[1]].push(split[2]) 
}) 

$scope.levels = levels; 

E la vista:

<div ng-controller="myAppList"> 
    <select name="clienT" ng-model="clientW" ng-options="letter as letter for (letter, opts) in levels"></select> 
    <select name="projecT" ng-model="clientX" ng-options="letter as letter for (letter, opts) in levels[clientW]"></select> 
    <select name="platforM" ng-model="clientZ" ng-options="letter as letter for letter in levels[clientW][clientX]"></select> 
</div> 

Demo: http://jsfiddle.net/uxo0jue3/4/

+0

Potresti semplicemente spiegarmi cose all'interno di ogni 'ng-opzioni' per favore? – AshBringer

+0

@BipBip - Sicuro. Quindi, le prime 2 sintassi usano la sintassi di ripetizione dell'oggetto '(chiave, valore) in obj' - e una volta selezionata un'opzione - il prossimo' select' utilizza semplicemente il livello successivo nell'oggetto per visualizzare le opzioni. Se 'a' è selezionato dal primo - le opzioni per il prossimo' select' sono generate da '$ scope.levels ['a']' - e così via e così via. – tymeJV

+0

È un po 'confuso - si noti che ogni 'select' è basato sul' select' 'ngModel' precedente. – tymeJV

Problemi correlati