Ng-Select in Ng-Select从第一个选择框中选择下一个值

Question

我有一个情况，我有一个包含年份的选择框（比如说2014,2013,2012） 对于每个选择框，例如有四分之一：（2014-＆gt; {q1}，2013-＆gt; {q1，q2，q3，q4}） 我想要一个简单的方法来在Ng-Select上使用Ng-option，它将执行以下操作 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];
});