Question

如何根据我在第一个组合框上选择的内容过滤第二个组合框选择？所以这里是控制器......和视图文件。

<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）

Answer 1

您可以使用管道过滤结果并使用ng-disabled进行选择（我有一个plnkr，但此时plnkr功能有问题）所以这是一个HTML，我改变了选择的模型，并扩展了他们的功能

<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' }
        ];
})

Answer 2

已停用：

<div>
                Parinti: 
                <select ng-model="vm.parinti" ng-options="parinte.nume for parinte in vm.parinti" ng-disabled="checked"></select>
                Copii: 
                <select ng-model="vm.copii" ng-options="copil.nume for copil in vm.copii "></select>
                Blocat:
                <input type="checkbox" ng-model="checked">

            </div>

根据angularjs过滤依赖的组合框

2 个答案: