Question

我需要有第一个值＆＃34; none＆＃34;检查为默认值，然后在选中任何其他选项时取消选中。我已经找到了使用ng-model完成此操作的方法，但我使用ng-model为电子邮件构建了一个对象。有没有办法可以使用棱角分明的风格来做到这一点？

<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来处理其状态。这实际上是一个好主意。＆＃34;无＆＃34;如果任何其他值设置为true，则将设置。考虑到这一点，您只需在任何控件表单中添加ng-click即可更新none状态。如果需要，还可以在检查＆＃34; none＆＃34;时添加另一个函数来将所有其他控件设置为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（）挂钩。

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

Answer 2

如何让所有其他响应都成为一个函数？

How many characters long is your encoded message?:
3
Enter your encoded message on a single line:
67,-2,19
CAT

如果您的备选方案列表变得更长，您可以将其转移到控制器中的某个功能。在ES6中，这可以非常简洁地完成

 <input name="allergies" class="checkbox"  
        type="checkbox" 
        ng-checked="!mailorder.allergies.codeine && !mailorder.allergies.sulfa &!...."

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

2 个答案: