CODEWITHSUNDEEP
angularjscheckbox
jaybong
jaybong

Reputation: 317

Multiple Checkboxes in Angular

Trying to implement multiple <input /> fields, that populate <div> elements with the text entered. After those are implemented, I want to implement a set of <input class="checkbox"> that when clicked will wrap the input text in additional text, depending on the checkbox selected.

The problem is the 1st checkbox is bound to the second checkbox. How do I separate the model associated with each checkbox?

I am currently using ng-switch-when and trying to set the values in the controller, but it's failing to bind separately as per the 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>

Upvotes: 0

Views: 197

Answers (1)

Tui Popenoe
Tui Popenoe

Reputation: 2124

First off, you can simplify your OnClickCheckbox() function to:

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

Secondly, you lack a UniversalGACheckbox() function, which you are assigning to your second checkbox ng-click.

Third, if you are assigning an ng-switch-when=test, that will never happen if you are binding to a value that only alternates between true and false, that state will never be reached.

You need to separate your checkboxes so that they are not bound to the same true/false $scope variable, although I think there is probably a better way to do this, a quick fix would be something like:

<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>

And in your script:

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

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

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

However, this is bad coding style, and involves a lot of duplication

Upvotes: 1

Related Questions