Multiple Checkboxes in Angular

Question

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>

You assign the same model to both checkboxes, so they show the same values. Seems you are looking for radio buttons, at least in functionality. — Mosho
– Mosho, Commented Feb 22, 2015 at 1:53

Tui Popenoe · Accepted Answer · 2015-02-22 02:17:26Z

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

Thanks, I never thought about duplicating the HTML - get that it's bad practice but I'm just keen to get this working and can tidy it up later when I understand this stuff a bit more. Will use ng-show to control the display of those duplicated divs.

Collectives™ on Stack Overflow

Multiple Checkboxes in Angular

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related