在AngularJS中如何刷新取消选中复选框的下拉菜单

How to refresh dropdown on unchecking the checkbox in AngularJS

本文关键字:取消 复选框 下拉菜单 AngularJS 何刷新 刷新      更新时间:2023-09-26

我在选择下拉列表时遇到了问题。当我取消选中复选框时,我想从angularJS中的数组中刷新下拉列表。基本上,我正在努力开发一种形式,我将在下拉菜单中选择一个价值控股公司,我的所有下拉菜单被禁用,我的复选框被选中。当我释放我在下拉菜单中选择的值保持不变。当我取消选中复选框时,我想刷新下拉列表。

代码如下:

<div class="col-md-6 col-sm-6">
                <select id="dropdown1" ng-model="of" class="form-control col-md-7 col-xs-12" ng-click="dropdown()">
                    <option ng:repeat=" officet in officetypes" value="{{officet.headoffice}}">{{officet.headoffice}}</option>
                </select>
            </div>
<input id="Checkbox1" ng-model="checkboxvalue" type="checkbox" name="abc" value="bca" ng-click="check()" />Is Main Entity
$scope.officetypes = [
        {
            headoffice: 'Branches',
            description: 'Branches'
        },
        {
        headoffice: 'Holding Company',
        description: 'Holding Company'
    },
    {
        headoffice: 'Subsidiaries',
        description:'Subsidiaries'
    },
    {
    headoffice: 'Ware house',
    description: 'Ware house'
    }];
$scope.check = function () {
        alert($scope.checkboxvalue + " Checked");
        //document.getElementById('dropdown1').disabled = true;
        if ($scope.temp === 0) {
            document.getElementById('dropdown1').disabled = true;
            document.getElementById('Dropdown2').disabled = true;
            document.getElementById('Dropdown3').disabled = true;
            $scope.temp = 1;
        }
        else if ($scope.temp === 1) {
            document.getElementById('dropdown1').disabled = false;
            document.getElementById('Dropdown2').disabled = false;
            document.getElementById('Dropdown3').disabled = false;
            document.getElementById('dropdown1').selectedIndex = 1;
            $scope.temp = 0;
        }
        else if ($scope.temp === 2) {
            document.getElementById('dropdown1').disabled = false;
            document.getElementById('Dropdown2').disabled = false;
            document.getElementById('Dropdown3').disabled = false;
            $scope.temp = 0;
        }
    }
$scope.dropdown = function () {
        if ($scope.of === 'Holding Company') {
            $scope.checkboxvalue = true;
            document.getElementById('dropdown1').disabled = true;
            document.getElementById('Dropdown2').disabled = true;
            document.getElementById('Dropdown3').disabled = true;
            document.getElementById('Checkbox1').checked = true;
            $scope.temp = 2;
            alert($scope.temp);
            temp = 0;
        }
        else if ($scope.of !== 'Holding Company') {
            $scope.checkboxvalue = false;
            document.getElementById('dropdown1').disabled = false;
            document.getElementById('Dropdown2').disabled = false;
            document.getElementById('Dropdown3').disabled = false;
            $scope.temp = 0;
        }
        if ($scope.of === 'Subsidiaries') {
            document.getElementById('Dropdown3').disabled = true;
        }
        if ($scope.of === 'Branches') {
            document.getElementById('dropdown1').disabled = false;
            document.getElementById('Dropdown2').disabled = false;
            document.getElementById('Dropdown3').disabled = false;
        }
    }

你可以检查这个答案,这可能对你有帮助

$scope.of = 0 ; 

此模态值为零,用于重置下拉菜单

http://plnkr.co/edit/h5em3jDXr049LOe86Fvm?p =预览

您可以使用$watch来检查复选框模型值的更新就像,在你的angular控制器中你应该写

$scope.$watch('checkboxvalue', function(newVal, oldVal) {
    if(newVal != oldVal){
        // re-assign value for officetypes (ng-repeat)
    }
});

我希望它能成功。