与angularjs根据筛选组合框 [英] Filter depending combobox with angularjs
问题描述
我怎样才能筛选基于什么，我选择第一组合框第二组合框中选择？
因此，这里的控制器......和视图文件。
How can i filter the second combobox choices based on what i select on first combobox? So here is the controller... and the view file.
<body ng-app="myApp" ng-controller="myCtrl">
<section class="mainbar">
<section class="matter">
<div class="container">
<h2></h2>
<div class="row">
<div class="widget wblue">
<div class="widget-content user">
</div>
<div class="widget-foot">
<div class="clearfix"></div>
</div>
</div>
</div>
<div>
<select ng-model="pSelected" ng-options="p.id as p.name for p in tier"></select>
<select ng-model="cSelected"
ng-options="c.name for c in cd"></select>
<label><input type="checkbox" </label>
</div>
</div>
</section>
</section>
</body>
和一个简单的JS
angular.module('myApp', []).
controller('myCtrl', function myCtrl($scope){
$scope.tier = [
{ id: 1, name: 'Tier1Head' },
{ id: 2, name: 'Tier2Head' },
{ id: 3, name: 'Tier3Head' }
];
$scope.cd = [
{ id: 1, idP: 1, name: 'Tier1' },
{ id: 2, idP: 1, name: 'Tier1' },
{ id: 3, idP: 1, name: 'Tier1' },
{ id: 4, idP: 2, name: 'Tier2' },
{ id: 5, idP: 2, name: 'Tier2' },
{ id: 6, idP: 3, name: 'Tier3' },
{ id: 7, idP: 3, name: 'Tier3' }
];
})
当我点击复选框..我需要先组合框被禁用（所以我不能选择其他的Parinte）
And when i click the checkbox.. i need first combobox to be disabled(so i can't select other Parinte)
推荐答案
您可以过滤用管道结果进行过滤
并使用 NG-停用的选择（我有一个plnkr你，但它有一个在这个时刻什么毛病plnkr功能
所以这里是一个HTML，我已经改款车型供选择，以及扩展其功能。
You can filter results with pipe to filter
and use ng-disabled for select (i had a plnkr for you but it there is something wrong with plnkr functionality at this moment
so here is a HTML, i've change models for selects as well as extended their functionality
<body ng-app="myApp" ng-controller="myCtrl">
<section class="mainbar">
<section class="matter">
<div class="container">
<h2></h2>
<div class="row">
<div class="widget wblue">
<div class="widget-content user">
</div>
<div class="widget-foot">
<div class="clearfix"></div>
</div>
</div>
</div>
<div>
<select ng-model="pSelected" ng-options="p.id as p.name for p in tier"
ng-disabled="tierdisable"></select>
<select ng-model="cSelected"
ng-options="c.name for c in cd | filter:{idP:pSelected}:true "></select>
<label><input type="checkbox" ng-model="tierdisable">Disable</label>
</div>
</div>
</section>
</section>
</body>
和一个简单的JS
angular.module('myApp', []).
controller('myCtrl', function myCtrl($scope){
$scope.tier = [
{ id: 1, name: 'Tier1Head' },
{ id: 2, name: 'Tier2Head' },
{ id: 3, name: 'Tier3Head' }
];
$scope.cd = [
{ id: 1, idP: 1, name: 'Tier1' },
{ id: 2, idP: 1, name: 'Tier1' },
{ id: 3, idP: 1, name: 'Tier1' },
{ id: 4, idP: 2, name: 'Tier2' },
{ id: 5, idP: 2, name: 'Tier2' },
{ id: 6, idP: 3, name: 'Tier3' },
{ id: 7, idP: 3, name: 'Tier3' }
];
})
这篇关于与angularjs根据筛选组合框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
