Angular中的多个复选框

debugcn 发表于 Dev

杰邦

尝试实现多个<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>

Tui Popenoe

首先，您可以将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);
    }

但是，这是不好的编码风格，并且涉及很多重复

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。