Angularjs: Lựa chọn kết hợp từ một danh sách

Question

Tôi có một danh sách đơn giản:

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

Từ này tôi muốn xây dựng 3 <select></select>.

Mục đầu tiên sẽ chứa các mục đầu tiên của mảng được phân tách bằng _. Vì vậy ["a","a","a","f","f","f"]

Thứ hai ["b","b","e","t","t","u"]

Thứ ba ["c","d","g","r","g","m"]

tôi đã xây dựng những 3 mảng và tôi đã làm cho giá trị duy nhất.

Điều tôi cần là ví dụ: nếu tôi chọn a trong lựa chọn đầu tiên, tùy chọn thứ hai sẽ chỉ hiển thị b,b,e.

Tôi thực sự muốn tôn trọng sự kết hợp có thể từ mảng start ($scope.myArr)

Bất kỳ ý tưởng về làm thế nào tôi có thể đạt được điều đó?

http://jsfiddle.net/uxo0jue3/

Answer 1

Bạn có thể lặp mảng của bạn, chia các giá trị và tạo đối tượng được san bằng. Đơn giản chỉ cần liên kết đối tượng đó với chế độ xem:

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; 

Và chế độ xem:

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