吳選擇Ng選擇從第一個選擇框中選擇下一個值

Question

我有一個情況，我有一個選擇框包含年（假設2014,2013,2012） 爲每個選擇框有四分之一例如：（2014 - > {q1}，2013 - > {q1，q2，q3，q4}） 我想要一個簡單的方法給Ng-Select上的用戶Ng選項，它將執行以下操作 1.選擇用戶從第一個下拉列表中選擇的年份 2.通過選擇的可用性更新第二個下拉列表（如果用戶在第一個選擇框中選擇2014，他將在第二個選擇框中將q1作爲單個選項，但是如果用戶選擇2013第一個選擇框，他將在第二個下拉列表中獲得q1，q2，q3，q4）。

我還使用以下JSON：

controller('PublishersCtrl',['$scope', function($scope) { 

$scope.publishers = [ 
     {year:'All'}, 
     {year:'2014',quarters: [{'Q1'},{'Q2'},{'Q3'}]}, 
     {year:'2013',quarters: [{'Q1'},{'Q2'},{'Q3'}]}}, 
    ]; 

}]

，這是我的看法代碼：

<section id="filter-and-summary"> 
<ul id="filters"> 
    <li> 
     Year 
     <select class="year" ng-model="publisher" ng-options="c.year for c in publishers"> 
     </select> | 
    </li> 
    <li> 
     Quarter 
     <select class="quarter" ng-model="publisher.quarters" data-ng-options="c.quarters for c in publishers"> 
     </select> | 
    </li> 
    <li> 

我也重視它應該如何看一個樣本像 請幫我理解我錯了什麼， 也有可能我的json沒有定義正確的。

Answer 1

Live demo here (click).

標記：

<ul id="filters"> 
    <li> 
     Year 
     <select 
     class="year" 
     ng-model="selectedPublisher" 
     ng-options="item.year for item in publishers" 
     > 
     </select> 
     | 
    </li> 
    <li ng-hide="selectedPublisher.year == 'All'"> 
     Quarter 
     <select 
     class="quarter" 
     ng-model="selectedQuarter" 
     ng-options="item for item in selectedPublisher.quarters" 
     > 
     </select> 
     | 
    </li> 
    </ul> 

JavaScript的：

var app = angular.module('myApp', []); 

app.controller('myCtrl', function($scope) { 
    $scope.publishers = [ 
    {year:'All'}, 
    {year:'2014',quarters: ['Q1','Q2','Q3']}, 
    {year:'2013',quarters: ['Q1','Q2','Q3']} 
    ]; 
    $scope.selectedPublisher = $scope.publishers[1]; 
    $scope.selectedQuarter = $scope.selectedPublisher.quarters[0]; 
});