2016-01-19 16 views
7

Mam proste listy:angularjs: wybierz połączenie z listy

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

Od tego chcę zbudować 3 <select></select>.

Pierwsza zawiera pierwsze elementy tablicy oddzielone _. Więc ["a","a","a","f","f","f"]

Drugi ["b","b","e","t","t","u"]

Trzeci ["c","d","g","r","g","m"]

I został zbudowany te 3 tablice i mam zrobić unikalne wartości.

To, czego potrzebuję, to na przykład, jeśli wybiorę a w pierwszym wyborze, drugi pokaże tylko b,b,e.

I rzeczywiście chcą respektować możliwe kombinacje z tablicy start ($scope.myArr)

jakieś pomysły w jaki sposób mogę to osiągnąć?

http://jsfiddle.net/uxo0jue3/

+0

Czy masz jakieś problemy z przerób go? – epascarello

+0

Nie wiem, co to znaczy:/ – AshBringer

+0

[this] (http://jsfiddle.net/v0gLkkqn/) działa, ale nie można używać różnych, więc prawdopodobnie nie jest to rozwiązanie, którego szukasz – AntiHeadshot

Odpowiedz

6

Można pętli swoją tablicę, podzielić wartości i utwórz obiekt wyrównany, po prostu połącz go z widokiem:

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; 

I widok:

<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

Czy możesz mi wyjaśnić rzeczy wewnątrz każdej 'ng-opcji' proszę? – AshBringer

+0

@ BipBip - Pewnie. Tak więc pierwsze 2 składnie używają składni powtórzeń obiektu '(klucz, wartość) w obj' - a po wybraniu opcji - następny' wybierz' po prostu używa następnego poziomu w obiekcie, aby wyświetlić opcje. Jeśli "a" jest wybrane od pierwszego - opcje następnego 'select' są generowane z' $ scope.levels ['a'] '- i tak dalej i tak dalej. – tymeJV

+0

To trochę zagmatwane - wystarczy zauważyć, że każde 'select' jest oparte na poprzednim' select' 'ngModel' – tymeJV

Powiązane problemy