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 directive：

<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 try it

Answer 2

请勿在{{1}}上使用ngRepeat，而应在<option>上使用ngModel。这个主题的documentation非常好。

<select>

使用AngularJS在select元素中获取所选选项

2 个答案: