Angularjs : Select combination from a list

Question

I have a simple list :

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

From this I want to build 3 <select></select>.

The first one will contain the first items of the array separated by _. So ["a","a","a","f","f","f"]

The second ["b","b","e","t","t","u"]

The third ["c","d","g","r","g","m"]

I've built these 3 arrays and I've make unique values.

What I need is that for example if I select a in the first select, the second one will only show b,b,e.

I actually want to respect the possible combinations from the array of start ($scope.myArr)

Any ideas on how can I achieve it ?

http://jsfiddle.net/uxo0jue3/

Answer 1

You can loop your array, split the values, and create a leveled object. The simply link it to the view:

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;

And the view:

<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/