角:基于模型依赖关系的下拉项目活动
角:基于模型依赖关系的下拉项目活动
提问于 2014-10-01 15:18:11
我希望一个下拉列表中的项目的活动状态取决于第二个模型中的属性：
angular.module('mainApp')
.controller('MainCtrl', function($scope) {
$scope.departments = [
{id:0, name: 'Dry Goods'},
{id: 1, name:'Frozen Food'},
{id: 2, name:'Electronics'}
];
$scope.categories = [
{id: 0, name: 'cereal', departmentId: 0},
{id: 1, name: 'cookies', departmentId: 0},
{id: 2, name: 'televisions', departmentId: 2}
];
});而跌落：
<select ng-model="department" ng-options="department.name for department in departments" ng-change="changeDepartment()">
<option value="">Department</option>
</select>
<select ng-model="category" ng-options="category.name for category in categories" ng-change="changeCategory()">
<option value="">Category</option>
</select>我希望部门下拉显示所有三个项目，但只有‘干货’和‘电子’应该是可选择的，因为在类别中有项目映射到部门通过departmentId属性。冷冻食品应该变灰白。
柱塞：http://plnkr.co/edit/c7rZ05qqRCnB7L0ANgZ4?p=preview
提前谢谢。
回答 1
Stack Overflow用户
回答已采纳
发布于 2014-10-01 15:34:43
只需在您的第二个“过滤器”中使用select，就可以这样做：
<select ng-model="category" ng-options="category.name for category in categories|filter:{departmentId:department.id}" ng-change="changeCategory()">
<option value="">Category</option>
</select>示例
更新
由于ng-options没有提供用于指示应该禁用哪些值的功能，因此您只有两个选项：
- 创建一个将为您提供该选项的自定义指令，这不是一项容易的任务，因为该指令应该监视
ng-select的集合和其他select的集合或选定值，换句话说：ng-带有禁用行的选项不适合您。 - 使用
ng-repeat构建您的选择要容易得多，如下所示：
。
<div ng-controller='MainCtrl'>
<div class="btn-group">
<select ng-model="departmentID" ng-change="changeDepartment()">
<option value="">Category</option>
<option ng-repeat="department in departments" value="{{department.id}}" ng-disabled="(categories|filter:{departmentId:department.id}).length==0">{{department.name}}</option>
</select>
</div>
<div class="btn-group">
<select ng-model="categoryID" ng-change="changeCategory()">
<option value="">Category</option>
<option ng-repeat="category in categories" value="{{category.id}}" ng-disabled="departmentID!=category.departmentId">{{category.name}}</option>
</select>
</div>
</div>示例
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26144709
复制相关文章
相似问题
腾讯云开发者
