Показать варианты HTML на основе отдельно выбранные параметры с угловой

Question

У меня есть некоторые данные, состоящие из различных брендов, и каждая бренд имеет вложенный массив (строки), содержащие имена диапазонов:

[ 
    { 
     "brandName" : "Brand 1", 
     "ranges" : [ 
      "Range A1", 
      "Range A2", 
      "Range A3" 
     ] 
    }, 
    { 
     "brand" : "Brand 2", 
     "ranges" : [ 
      "Range B1", 
      "Range B2", 
      "Range B3" 
     ] 
    }, 
] 

То, что я попытка сделать это отобразить элемент выбора со списком опций, содержащих имена диапазонов, в качестве их значений и innerHTML, на основе ранее выбранного бренда в отдельном элементе select.

Я не уверен, как ориентироваться на выбранный объект бренда, чтобы получить доступ к вложенному массиву, поскольку я пытаюсь сделать это «Угловой способ».

В настоящее время я пытаюсь использовать ngRepeat, но не могу заставить его работать.

В контроллере:

$scope.formData = { 
    brandData : [ 
     { 
      "brandName" : "Brand 1", 
      "ranges" : [ 
       "Range A1", 
       "Range A2", 
       "Range A3" 
      ] 
     }, 
     { 
      "brandName" : "Brand 2", 
      "ranges" : [ 
       "Range B1", 
       "Range B2", 
       "Range B3" 
      ] 
     }, 
    ], 
    currentBrand : undefined, 
    currentRange : undefined 
}; 

И упрощенной разметке:

<select name="currentBrand" ng-model="formData.currentBrand"> 
    <option value="" disabled>Select a brand</option> 
    <option value="none" selected>None</option> 
    <option ng-repeat="brand in formData.brandData" value="{{brand.brandName}}">{{brand.brandName}}</option> 
</select> 

<select name="currentRange" ng-model="formData.currentRange"> 
    <option value="" disabled>Select a range</option> 
    <option value="none" selected>None</option> 
    <option ng-repeat="how do I show each range name in the 'ranges' array of the selected brand ????? value="{{rangeName}}">{{rangeName}}</option> 
</select> 

Есть некоторые подобные вопросы, плавающие вокруг, но я не мог найти какой-либо конкретной к структуры данных, которые у меня есть.

Заранее благодарен!

UPDATE

Благодаря Рохана, я теперь достиг своей первоначальной цели. Тем не менее, я также хотел, чтобы значение каждого элемента option устанавливалось равным его внутреннемуHTML. Для этого я использовал track by... особенность ngOptions:

<select name="currentBrand" ng-model="formData.currentBrand" ng-options="brandOption as brandOption.brandName for brandOption in brandOptions track by brandOption.brandName"> 
    <option value="" disabled>Select a brand</option> 
</select> 

<select name="currentRange" ng-model="formData.currentRange" ng-options="rangeOption for rangeOption in formData.currentBrand.ranges track by rangeOption"> 
    <option value="" disabled>Select a range</option> 
</select> 

Для рабочего примера, я раздвоенный и обновленный jsfiddle Рохана: http://jsfiddle.net/munkychop/hgzdannz/1/

Answer 1

Используйте нг-опций для этого: https://docs.angularjs.org/api/ng/directive/select

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

<div> 
     <select name="currentBrand" ng-model="currentBrand" 
       ng-options="brandOption as brandOption.brandName for brandOption in brandOptions"> 
       <option value="" disabled>Select a brand</option> 
      </select> 
     </div> 

     <span>Selected brand: {{currentBrand}}</span> 
     <div> 
      <select name="currentRange" ng-model="currentRange" 
      ng-options="rangeOption for rangeOption in currentBrand.ranges"> 
       <option value="" disabled>Select a range</option> 
      </select> 
     </div> 

     <span>Selected Range: {{currentRange}}</span> 
    </div> 

Вот ваш рабочий фрагмент кода:

http://jsfiddle.net/hjq7gbLz/

Answer 2

Вы могли бы принять подход определения метода в контроллер, чтобы получить диапазон, соответствующий выбранному бренду. Это может быть приблизительным, чтобы вы идете в правильном направлении:

$scope.getCurrentBrandRanges = function() { 
    for (var i=0;i < $scope.formData.brandData.length;i++) { 
    if ($scope.formData.brandData[i].brandName == $scope.formData.currentBrand) 
     return $scope.formData.brandData[i].ranges; 
    } 
    return []; // In case nothing matches for some reason. 
} 

И для ng-repeat директивы можно указать что-то вроде:

ng-repeat="range in getCurrentBrandRanges()" 

Answer 3

Что вам нужно, это индекс выбранного элемента в массиве бренда, так что вы можете использовать его в нг-повторе, как это :

<option ng-repeat="range in formData.brandData[currentBrand].ranges" value="{{rangeName}}">{{rangeName}}</option> 

вы можете иметь переменную в вашей области, чтобы сохранить это, или вы можете сделать это легко с помощью индекса в качестве значения ваших опций:

<option ng-repeat="brand in formData.brandData" value="{{$index}}">{{brand.brandName}}</option> 

Поскольку curretBrand является моделью для избранных, 2-полосных привязок данных обновят селектор бренда, когда он меняет без необходимости какой-либо дополнительной код на контроллере.

Here is a fiddle to demonstrate.