AngularJS使用ng-repeat时如何实现radio按钮动态禁用与启用

问题根因 #

• HTML中输入框的ng-model和控制器的changeapplicant方法重名，输入值会直接覆盖方法定义，导致后续变更无法正确触发逻辑
• 触发状态变更的方法中没有每次先重置所有选项的禁用状态，也没有覆盖所有输入场景的处理分支，非匹配场景下不会修改禁用状态，所以无法恢复启用
• 现有逻辑只处理了非Male选项的状态设置，未对应修改Male选项的禁用状态

修复后代码 #

控制器JS代码

PPCO.cusGender = [ {
    id : '1',
    key : 'Male',
    value : 'Male',
    disable: false
}, {
    id : '2',
    key : 'Female',
    value : 'Female',
    disable: false
}, {
    id : '3',
    key : 'TG',
    value : 'TG',
    disable: false
}];

// 单独定义输入框绑定变量，避免和方法重名
PPCO.p_SALUTATION = '';

PPCO.changeapplicant = function() {
    // 每次触发先重置所有选项为启用状态
    angular.forEach(PPCO.cusGender, function(val) {
        val.disable = false;
    });
    const salutation = PPCO.p_SALUTATION.toLowerCase().trim();
    switch (salutation) {
        case 'mrs.':
        case 'miss.':
            // 女士称呼时禁用Male选项
            angular.forEach(PPCO.cusGender, function(val) {
                if(val.key === 'Male') {
                    val.disable = true;
                }
            });
            break;
        case 'mr.':
            // 男士称呼时禁用非Male选项
            angular.forEach(PPCO.cusGender, function(val) {
                if(val.key !== 'Male') {
                    val.disable = true;
                }
            });
            break;
        // 其他输入场景默认全启用，已在开头重置无需额外处理
        default:
            break;
    }
};

HTML代码

<!-- ng-model绑定单独定义的变量，不要和方法重名 -->
<input type="text" ng-model="PPCO.p_SALUTATION" class="color" ng-change="PPCO.changeapplicant()">

<label class="radio" ng-repeat="option in PPCO.cusGender">
    <input type="radio" name="gender"
           ng-model="PPCO.cusgendername" value="{{option.value}}" 
           ng-disabled="option.disable">
    <i></i>
</label>

内容的提问来源于stack exchange，提问作者sandeep