Цепочки выбора с угловым JS

Question

Я совершенно новый, просто экспериментируя с рамкой AngularJS. Поэтому я не уверен, что подход, который я принял, является лучшим/правильным способом.

Я пытаюсь создать 3-х уровневые прикованные ajax заполненные поля выбора, и это отчасти работает, за исключением нескольких проблем.

В моем фактическом коде используется ajax, который находится на заводе, но для скрипки у меня просто есть контроллер, возвращающий результаты из массива.

Demo (с использованием массивов, не АЯКС):http://jsfiddle.net/xxwe1zu8/1/

Вопросы:

1. выбирает второй и третий уровень не имеют "выбранный" атрибут - то есть тот, который вы выбираете не выделяется.
2. В идеале я бы хотел, чтобы категории верхнего уровня динамически заполнялись при загрузке страницы через ajax (или в этом примере по массиву), используя ту же угловую функцию (например: getSubcategories = function (0, 0) {), а не hardcoded. Категории верхнего уровня имеют родительский знак 0.

3. Бонус: Может ли 3-я поле выбора отображаться/отображаться только в том случае, если подкатегория возвращается после выбора подкатегории? В действительности большинство подкатегорий не будут иметь подкатегорий.

   var myAppModule = angular.module('myApp',[]); 
   myAppModule.controller('SearchCtrl', function($scope) { 
   var self = this; 
   
   self.subCategories = []; 
   self.getSubcategories = function(parent, level) { 
   
       theCategories = []; 
   
        angular.forEach(sub_category[parent], function(idx, val) { 
         theCategories.push({id: val, name: idx}); 
        }); 
   
   
       self.subCategories[level] = theCategories; 
   }  
   }); 
   

Благодаря

Answer 1

Я бы предложил реструктурировать данные в массиве объектов и избавиться от indicies, которые, казалось бы, не использовать здесь.

var transport = [ 
    { 
     name: "Cars", 
     models: [ 
      { 
       name: "Hatchback", 
       variations: ["4 door", "5 door"] 
      }, 
      { 
       name: "Sedan", 
       variations: ["4 door", "5 door"] 
      }, 
      { 
       name: "SUV", 
       variations: ["Medium", "Large"] 
      } 
     ] 
    }, 
... 

Это позволяет сделать более четкий код в шаблоне. Я не являюсь синтаксисом ControllerAs, так как $scope вводится любым способом. И это лучший вариант, если вы просто начать обучение AngularJS

<select 
     ng-model="selectedType" 
     ng-options="t.name for t in transport" 
     ng-change = "selectedModel=null;selectedVariation=null"> 
     <option value="">Select type</option> 
    </select> 

    <select 
     ng-model="selectedModel" 
     ng-options="model.name for model in selectedType.models" 
     ng-change="selectedVariation=null" 
     ng-show="selectedType.models"> 
     <option value="">Select model</option> 
    </select> 

    <span ng-show="loading">Loading...</span> 
    <select 
     ng-model="selectedVariation" 
     ng-options="variation for variation in variations" 
     ng-show="variations && !loading"> 
     <option value="">Select variation</option> 
    </select> 

selectedType, selectedModel и selectedVariation неявно определена в $scope по ng-model каждому выбору. В настоящее время даже нет упоминания о них в контроллере. В то же время эти свойства используются в ng-show, чтобы скрыть select теги, которые не актуальны в текущем выборе.
Последняя select (подкатегория) демонстрирует способ получения данных асинхронно. Представим себе, что у вас нет полного дерева данных сразу и выбор вариаций с сервера при выборе модели. Вы бы разместить часы в контроллере для selectedModel и если он был выбран (не опорожняется) вы бы запустить запрос данных и варианты обновления на ответ

$scope.$watch('selectedModel', function(model){ 
    if(model){ 
     $scope.loading = true; 
     //setTimeout imitates an ajax request 
     setTimeout(function(){ 
      $scope.variations = model.variations; 
      $scope.loading = false; 
      $scope.$apply(); 
     }, 1000); 
    } 
}) 

Updated fiddle