javascript - 如何在选中另一个复选框时取消选中默认复选框 - Angular

Question

我需要将第一个值“none”作为默认值选中，然后在选中任何其他选项时取消选中。我已经找到了使用 ng-model 执行此操作的方法，但我正在使用 ng-model 构建电子邮件对象。有没有一种方法可以使用有棱 Angular 的风格来做到这一点？

<div class="activate-mail-subsection">
         <label>Allergies</label><br>
         <div class="checkbox mailorder-checkbox">
            <input name="allergies" class="checkbox"  type="checkbox" ng-model="mailorder.allergies.none" tabindex="1"/> None
        </div>
         <div class="checkbox mailorder-checkbox">
             <input name="allergies" class="checkbox"  type="checkbox" ng-model="mailorder.allergies.codeine" tabindex="1"/> Codeine
         </div>
         <div class="checkbox mailorder-checkbox">
             <input name="allergies" class="checkbox"  type="checkbox" ng-model="mailorder.allergies.sulfa" tabindex="1"/> Sulfa
         </div>
         <div class="checkbox mailorder-checkbox">
             <input name="allergies" class="checkbox"  type="checkbox" ng-model="mailorder.allergies.asprin" tabindex="1"/> Asprin
         </div>
         <div class="checkbox mailorder-checkbox">
             <input name="allergies" class="checkbox"  type="checkbox" ng-model="mailorder.allergies.penicillin" tabindex="1"/> Penicillin
         </div>
            <div class="checkbox mailorder-checkbox">
                <label>Other</label>
                <input name="allergies" class="form-control health-profile-text" type="text" ng-model="mailorder.allergies.other" tabindex="1"/>
            </div>
        </div>

这是对象

  $scope.mailorder = {
    allergies: {none: true, codeine: false, sulfa: false, aspirin: false, penicillin: false, other: ''},
};

Answer 1

您可以继续使用 ng-models 来处理它们的状态。这实际上是个好主意。如果任何其他值设置为 true，则将设置“none”。考虑到这一点，您只需向任何控件表单添加 ng-click 即可更新无状态。如果需要，您还可以添加另一个函数，在选中“无”框后将所有其他控件设置为 false。

<div class="activate-mail-subsection">
    <label>Allergies</label>
    <br />
    <div class="checkbox mailorder-checkbox">
        <input type="checkbox" name="allergies" class="checkbox" ng-model="mailorder.allergies.none" tabindex="1" ng-click="setNone()" />None
    </div>
    <div class="checkbox mailorder-checkbox">
        <input type="checkbox" name="allergies" class="checkbox" ng-model="mailorder.allergies.codeine" tabindex="1" ng-click="update()" />Codeine
    </div>
    <div class="checkbox mailorder-checkbox">
        <input type="checkbox" name="allergies" class="checkbox" ng-model="mailorder.allergies.sulfa" tabindex="1" ng-click="update()" />Sulfa
    </div>
    <div class="checkbox mailorder-checkbox">
        <input type="checkbox" name="allergies" class="checkbox" ng-model="mailorder.allergies.asprin" tabindex="1" ng-click="update()" />Asprin
    </div>
    <div class="checkbox mailorder-checkbox">
        <input type="checkbox" name="allergies" class="checkbox" ng-model="mailorder.allergies.penicillin" tabindex="1" ng-click="update()" />Penicillin
    </div>
    <div class="checkbox mailorder-checkbox">
        <label>Other</label>
        <input type="text" name="allergies" class="form-control health-profile-text" ng-model="mailorder.allergies.other" tabindex="1" ng-change="update()" />
    </div>
</div>

(注意 HTML 代码中的 updateNone() 和 update() Hook )。

angular.module("app", []).controller('Ctrl',
    function($scope) {
        $scope.mailorder = {
            allergies: {
                none: true,
                codeine: false,
                sulfa: false,
                aspirin: false,
                penicillin: false,
                other: ''
            }
        };

        $scope.setNone = function() {
            $scope.mailorder.allergies.none = true;
            // Iterate over all mailorder elements
            for (var i in $scope.mailorder.allergies) {
                if (i === 'none') {
                    continue;
                }
                $scope.mailorder.allergies[i] = null;
            }
        }

        $scope.update = function() {
            for (var i in $scope.mailorder.allergies) {
                if (i === 'none') {
                    continue;
                }
                if ($scope.mailorder.allergies[i]) {
                    $scope.mailorder.allergies.none = false;
                    return;
                }
            }
            $scope.mailorder.allergies.none = true;
        };
    }
);

以下是 Plunker 中的示例:http://plnkr.co/edit/b0JtSA7wI2XHd7KriSDp?p=preview