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中的多个复选框

1 个答案: