Angular 中的多个复选框

Question

尝试实现多个 <input /> 字段，用输入的文本填充 <div> 元素。在这些实现之后，我想实现一组 <input class="checkbox">，当单击时将输入文本包装在附加文本中，具体取决于所选的复选框。

问题是第一个 checkbox 绑定到第二个 checkbox。如何分离与每个复选框关联的模型？

我目前正在使用 ng-switch-when 并尝试在控制器中设置值，但无法按照 plunkr

单独绑定

<div class="code alert-box warning" ng-switch on="TrackingCode.AddOnClick">
<div ng-switch-when="true">
    <!-- code to render when AddOnClick checkbox is checked-->
    <code>
        onclick="_gaq.push(['_trackEvent({{category}}', '{{action}}', '{{label}}', '{{value}}', '{{nonInteraction}}']);"
    </code>
</div>
<div ng-switch-when="test">
    <!-- code to render when Something Else checkbox is checked-->
    <code>
        SomethingElse="_gaq.push(['_trackEvent({{category}}', '{{action}}', '{{label}}', '{{value}}', '{{nonInteraction}}']);"
    </code>
</div>
<div ng-switch-default>
    <!-- code to render when AddOnClick checkbox is un-checked -->
    <code>
        _gaq.push(['_trackEvent', '{{category}}', '{{action}}', '{{label}}', '{{value}}', '{{nonInteraction}}']);
    </code>
</div>
</div>

Answer 1

首先，您可以将 OnClickCheckbox() 函数简化为：

 /* Wrap output in onclick function */
$scope.OnClickCheckbox = function () 
    $scope.AddOnClick = !($scope.AddOnClick);
}

其次，您缺少 UniversalGACheckbox() 函数，您将其分配给第二个复选框 ng-click。

第三，如果您正在分配 ng-switch-when=test，如果您绑定到仅在 true 和 false 之间交替的值，则永远不会发生这种情况，该状态永远不会发生到达。

你需要分开你的复选框，这样它们就不会绑定到同一个 true/false $scope 变量，虽然我认为可能有更好的方法来做到这一点，一个快速的解决办法是类似于：

<div class="code alert-box warning" ng-switch on="TrackingCode.AddOnClick">

                <div ng-switch-when="true">
                    <!-- code to render when AddOnClick checkbox is checked-->
                    <code>
                    onclick="_gaq.push(['_trackEvent({{category}}', '{{action}}', '{{label}}', '{{value}}', '{{nonInteraction}}']);"
                    </code>            
                </div>
                <div ng-switch-default>
                    <!-- code to render when AddOnClick checkbox is un-checked -->
                    <code>
                    _gaq.push(['_trackEvent', '{{category}}', '{{action}}', '{{label}}', '{{value}}', '{{nonInteraction}}']);
                    </code>
                </div>
            </div>
            <div class="code alert-box warning" ng-switch on="TrackingCode.AddOnClick2">
              <div ng-switch-when="true">
                    <!-- code to render when AddOnClick checkbox is checked-->
                    <code>
                    SomethingElse="_gaq.push(['_trackEvent({{category}}', '{{action}}', '{{label}}', '{{value}}', '{{nonInteraction}}']);"
                    </code>            
                </div>
                <div ng-switch-default>
                    <!-- code to render when AddOnClick checkbox is un-checked -->
                    <code>
                    _gaq.push(['_trackEvent', '{{category}}', '{{action}}', '{{label}}', '{{value}}', '{{nonInteraction}}']);
                    </code>
                </div>
            </div>

并且在您的脚本中：

/* Wrap output in onclick function */
    $scope.OnClickCheckbox = function () {

        $scope.AddOnClick = !($scope.AddOnClick);
    }

    $scope.UniversalGACheckbox = function(){
      $scope.AddOnClick2 = !($scope.AddOnClick2);
    }

但是，这是一种糟糕的编码风格，涉及大量重复

Angular 中的多个复选框

Multiple Checkboxes in Angular

checkbox

angularjs