angularjs - 使用AngularJS获取选择元素中的选定选项

Question

在 AngularJs 中，如何在一个 select 元素中获取选中的选项，然后使用这个值来限制另一个 select 元素中的可用选项？

代码：

<select>
    <option value="" disabled selected style="display:none;">
        Release...
    </option>
    <option ng-repeat="release in releases" value="{{ release.title }}">
        {{ release.title }}
    </option>
</select>

<select>
    <option value="" disabled selected style="display:none;">
        Sprint...
    </option>
    <option ng-repeat="sprint in releases[ ***selectedRelease***  ].sprints" value="{{ sprint.title }}">
        {{ sprint.title }}
    </option>
</select>   

即我想知道我必须投入***selectedRelease***什么？

数据

$scope.releases = [
    {   title:  'V1',
        sprints: [ 
            {   title:  'S1'    },
            {   title:  'S2'    },
            {   title:  'S3'    }
        ]               
    },
    {
        title:  'V2',
        sprints: [ 
            {   title:  'S4'    },
            {   title:  'S5'    }
    }
];

Answer 1

使用角度的选择指令：

<select ng-model="selectedRelease" ng-options="release.title for release in releases">
  <option value="" disabled selected style="display:none;">
    Release...
  </option>
</select>

<select ng-options="sprint.title for sprint in selectedRelease.sprints">
  <option value="" disabled selected style="display:none;">
      Sprint...
  </option>
</select>

在您的控制器中，添加：

$scope.selectedRelease = null;

我创建了一个 plunk，试试看

Answer 2

不要使用ngRepeaton <option>，而是使用ngModelon <select>。这个主题的文档确实做得很好。

<select ng-model="selectedRelease" ng-options="release.title for (key, release) in releases">
    <option value="">
        Release...
    </option>
</select>

<select ng-model="selectedSprint" ng-options="sprint.title for (key, sprint) in releases[selectedRelease].sprints">
    <option value="">
        Sprint...
    </option>
</select>